[React] 혹시 리액트 렌더링 과정을 아시나요?

[React] 혹시 리액트 렌더링 과정을 아시나요?

 

리액트의 첫 렌더링

1. 첫 렌더링때 데이터들을 초기화 합니다 (state, props) 
2. 초기화된 값을 반영한 jsx를 반환합니다.
3. 반환한 jsx를 참조해서 Virtual Dom을 만듭니다.
4. 버츄얼 돔을 참고해서 실제 돔을 만듭니다.
5. 실제 돔을 브라우저에 삽입합니다.
6. LayoutEffect 실행됩니다.
7. 이후에 브라우저는 변경을 감지해서 브라우저 렌더링을 진행하게 됩니다.
8. 버츄얼 돔을 통해 만들어진 실제돔 + cssom을 가지고 렌더트리를 만듭니다.
9. 각 요소에 대한 위치, 크기를 잡는 Layout 작업을 합니다.
10. 스타일을 적용하는 Paint 작업을 합니다.
11. 레이아웃이 여러개 있는 경우 각 레이어를 합쳐 최종화면을 만드는 Composite 작업을 합니다.
12. UseEffect 실행됩니다.

 

 

리액트의 업데이트

1. 상태값이 변경(업데이트) 된다면 새로 렌더링하게 됩니다.
2. 업데이트 된 상태를 반영한 jsx를 가지고 새로운 Virtual Dom을 만듭니다.
3. 새로 만든 버츄얼돔과 이전의 버츄얼 돔을 비교해서 바뀐점을 찾습니다 (diffing)
4. 바뀐점을 실제 돔에 업데이트합니다 (Reconciliation)
5. LayoutEffect의 클린함수 실행됩니다.
6. LayoutEffect 실행됩니다.
7. 브라우저는 업데이트된 돔을 감지해서 바뀐부분을 리랜더링합니다.
8. 각 요소에 대한 위치, 크기를 잡는 Reflow 작업을 합니다.
9. 스타일을 적용하는 Repaint 작업을 합니다.
10. 레이아웃이 여러개 있는 경우 각 레이어를 합쳐 최종화면을 만드는 Composite 작업을 합니다.
11. UseEffect의 클린함수 실행됩니다.
12. UseEffect 실행됩니다.