useLayoutEffect vs useEffect
-
React 컴포넌트 렌더링 전체 과정 정리 (feat. useLayoutEffect vs useEffect)Frontend/React 2023. 3. 25. 13:48
React 앱의 마운트 과정 1. 함수 컴포넌트 호출 2. 구현부 실행 - props 취득, hook 실행, 내부 변수 및 함수 생성 - 이 때 hook에 등록해 둔 상태값, 부수함수 효과등은 별도 메모리에 저장되어 관리된다. (useMemo, useCallback등을 활용한 케이스) cf. useMemo vs useCallback 차이 및 각각의 특징과 언제쓰는지에 대한 포스팅 3. return 실행 - 렌더링 단 4. 렌더 단계 (렌더 트리 구축) - 새로운 가상 Dom 생성 후, 이전 가상 DOM과 비교하여 달라진 부분을 탐색하고 실제 DOM에 반영할 노드들을 결정한다. - DOM 트리에 있어도 display: none 속성이 있거나 head등 표시되지 않는 태그의 경우 화면에 표시되지 않을 수 있..