React 컴포넌트 렌더링 전체 과정 정리 (feat. useLayoutEffect vs useEffect)

React 앱의 마운트 과정

1. 함수 컴포넌트 호출

 

2. 구현부 실행

- props 취득, hook 실행, 내부 변수 및 함수 생성

- 이 때 hook에 등록해 둔 상태값, 부수함수 효과등은 별도 메모리에 저장되어 관리된다.

(useMemo, useCallback등을 활용한 케이스)

cf. useMemo vs useCallback 차이 및 각각의 특징과 언제쓰는지에 대한 포스팅

 

3. return 실행

- 렌더링 단

 

4. 렌더 단계 (렌더 트리 구축)

- 새로운 가상 Dom 생성 후, 이전 가상 DOM과 비교하여 달라진 부분을 탐색하고 실제 DOM에 반영할 노드들을 결정한다.

- DOM 트리에 있어도 display: none 속성이 있거나 head등 표시되지 않는 태그의 경우 화면에 표시되지 않을 수 있다.

 

5. 커밋 단계

- 달라진 부분만 실제 DOM에 반영한다.

 

6. useLayoutEffect

- 브라우저가 화면에 Paint 하기 전에, useLayoutEffect에 등록해둔 함수가 '동기'로 실행된다.

- 이 때, state, redux store등 state의 변경이 있다면 한번 더 재렌더링 된다. 

 

7. Paint

- 브라우저가 실제 DOM을 화면에 그린다. 

- painting은 stacking contexts라는 스택에 명령을 쌓아 실행한다. stack에는 배경 색 - 배경 이미지 - 테두리 - 자식 - 아웃라인 순으로 명령이 쌓이고, 실행은 아웃라인 - 자식 - 테두리 - 재경 이미지 - 배경색 순으로 실행된다. 

 

8. useEffect 

- 화면이 그려진 이후, useEffect에 등록해둔 함수가 '비동기'로 실행된다.

- effect에 return 부분이 있다면(useEffect-cleanup Function), 구현부보다 먼저 실행된다. 

cf. useEffect vs useLayoutEffect 차이 및 각각의 특징과 언제쓰는지에 대한 포스팅

 

---

React 앱의 재랜더링 과정

1. 함수 컴포넌트 재호출

 

2. 구현부 실행

- props 취득, hook 실행, 내부 변수 및 함수 재생성

- 이 때 hook에 등록해 둔 상태값, 부수함수 효과등은 별도 메모리에 저장되어 관리된다.

(useMemo, useCallback등을 활용한 케이스)

cf. useMemo vs useCallback 차이 및 각각의 특징과 언제쓰는지에 대한 포스팅

 

3. return 실행

- 렌더링 단

 

4. 렌더 단계 (렌더 트리 구축)

- 새로운 가상 Dom 생성 후, 이전 가상 DOM과 비교하여 달라진 부분을 탐색하고 실제 DOM에 반영할 노드들을 결정한다.

- DOM 트리에 있어도 display: none 속성이 있거나 head등 표시되지 않는 태그의 경우 화면에 표시되지 않을 수 있다.

 

5. 커밋 단계

- 달라진 부분만 실제 DOM에 반영한다.

 

6. useLayoutEffect

- 브라우저가 화면에 Paint 하기 전에, useLayoutEffect에 등록해둔 함수가 '동기'로 실행된다.

- 이 때, state, redux store등 state의 변경이 있다면 한번 더 재렌더링 된다. 

 

7. Paint

- 브라우저가 실제 DOM을 화면에 그린다. 

- painting은 stacking contexts라는 스택에 명령을 쌓아 실행한다. stack에는 배경 색 - 배경 이미지 - 테두리 - 자식 - 아웃라인 순으로 명령이 쌓이고, 실행은 아웃라인 - 자식 - 테두리 - 배경 이미지 - 배경색 순으로 실행된다. 

 

8. useEffect 

- 화면이 그려진 이후, useEffect에 등록해둔 함수가 '비동기'로 실행된다.

- effect에 return 부분이 있다면(useEffect-cleanup Function), 구현부보다 먼저 실행된다. 

cf. useEffect vs useLayoutEffect 차이 및 각각의 특징과 언제쓰는지에 대한 포스팅

 

---

💛 재렌더링 시, 불필요한 지역변수/함수 재생성 막는 방법

 

- useMemo, useCallback 훅을 사용하면 최초 한번 생성 후 재사용이 가능하다.

- hook 사용 시, 의존성 배열을 활용하여 재생성 여부를 결정할 수 있다. 

- 그러나 useMemo, useCallback의 과한 남용은 좋지않다. 최적화를 하려고 썼는데 오히려 메모이제이션되는 비용이 더 비쌀수도 있으니 브라우저 위에서 성능 테스트를 거치는 것은 필수이다. 

 

 

 

참고 : https://curryyou.tistory.com/486