728x90 반응형 DOM5 [React] 리액트 훅 - useMemo, useCallback(메모이제이션 값, 함수 반환) 📌 useMemo, useCallback 훅useMemo, useCallback은 모두 불필요한 렌더링 또는 연산을 제어하는 용도로 성능 최적화에 그 목적이 있다.useMemo 계산된 값을 기억해 두고, 의존성 배열에 있는 값이 바뀔 때만 새로 계산합니다. useCallback 함수를 기억해 두고, 의존성 배열에 있는 값이 바뀔 때만 새로 함수를 생성합니다.useMemo(() => 함수, 의존성 배열);useCallback (함수, 의존성 배열);🤔 리렌더링(re-rendering)React는 Virtual DOM을 사용하고 있다. 따라서 리렌더링이 되는 조건에 충족되는 상황이라면, 이전의 Virtual DOM과 현재의 Virtual DOM을 비교하여 변경된 값에 대해 DOM 트리를 업데이트 해준.. 2024. 8. 30. [JavaScript] 자바스크립트 문서 객체 모델(DOM) - DOM Tree, DOM API, DOM 노드 접근, DOM 노드 탐색, DOM 노드 조작, DOM 이벤트 처리 문서 객체 모델 DOM (Document Object Model)DOM 이란 Document Object Model의 약자입니다. 번역하자면 문서 객체 모델인데요.여기서의 문서는 HTML 문서를 말한다. 브라우저는 웹 문서를 로드한 후, 파싱하여 DOM을 생성한다. DOM은 모든 요소, 속성, 텍스트를 객체로 만들어 이 객체들을 부자 관계에 따라 트리 구조로 구성한 것을 의미한다. 정적인 웹페이지를 변경하는 유일한 방법은 DOM을 변경하는 것이며, 이 때 필요한 것이 DOM API이다.DOM Tree 구성요소문서 노드(Document Node) ➡️ 최상위 트리이자 접근의 시작점이다.요소 노드(Element Node) ➡️ HTML 요소를 표현한다.속성 노드(Attribute Node) ➡️ .. 2024. 6. 16. [JavaScript] 자바스크립트 요소 추가하기 - .createElement(), .createTextNode(), .appendChild() JavaScript 요소 추가자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. .createElement().createTextNode().appendChild()노드 객체 생성하는 주요 메서드메서드생성하는 노드 객체document.createElement(요소 이름) 요소 노드 객체document.createAttribute(속성 이름) 속성 노드 객체document.createTextNode(텍스트)텍스트 노드 객체document.createComment(텍스트) 주석 노드 객체document.createDocumentFragment()도큐먼트 프래그먼트document.importNode(다른 문서의 노드, deep)다른 문서에 있는 노드를 복사한다. deep을 true로 설정하면.. 2024. 6. 13. [JavaScript] DOM 객체와 이벤트 처리 예제를 통해 DOM event 시스템 알아보기 Explore DOM EventsA visualizer to help you learn how the DOM Event system works through explorationdomevents.dev 이벤트 전달과 DOM 이벤트 처리정의특정 DOM 에서 이벤트가 발생하면 해당 DOM의 dispatchEvent() 라는 함수를 통해서 이벤트를 전달한다.이벤트 전달은 propagation path라는 전파 경로에 따라서 수행된다.이벤트 전달에 관한 이미지이벤트 전달 순서1) 이벤트 캡처단계이벤트 객체가 window 객체로부터 대상의 부모까지 순서대로 전달되는 단계2) 이벤트 대상단계이벤트 객체가 이벤트 대상에 도달하는 단계3) 이벤트 버블단계이벤트 객체가 대상.. 2023. 3. 10. [JavaScript] 브라우저 이벤트, 이벤트 프로퍼티, 이벤트 핸들링 참고자료 : https://ko.javascript.info/events 이벤트 기초 ko.javascript.info 2023. 3. 10. 이전 1 다음 728x90 반응형
