createRoot()
- DOM Tree와 Virtural DOM Tree를 비교
- Virtual DOM Tree에서
<div id = "root" />
를 나타내는 node를 생성함
Virtual DOM의 역할
- 최적화된 업데이트로 사용자 경험 개선
- 브라우저에 반영하기 전에 사전 작업을 하는 것
- 업데이트에 우선순위를 부여
- Animation vs Text
- 텍스트보다 애니메이션이나 이미지 업데이트가 더 먼저 일어나야 함
Fiber
- React 렌더링/ 업데이터의 가장 작은 단위
- work라고도 함
- 효율적인 업데이트를 위해
- work를 중지하고, 필요 시 다시 시작
- 다른 종류의 work들에게 우선순위 부여
- 이미 완료된 work를 재사용
- work가 더 이상 필요 없게 되면 버림
render()
- Render phase
- Commit phase
rendering 실행 순서
1. Triggering a render
2. Rendering the component
3. Commiting to the DOM
Reconciliation
- 업데이트가 발생할 때 기존 tree와 차이점을 비교하는 방법
- DFS(Depth First Search)로 tree를 traverse
Render phase
- performUnitOfWork
- beginWork
- completeUnitOfWork
- completeWork
Current and work-in-progress
- Current
- Work-in-progress
- 업데이트 사항이 반영되는 중인 DOM Tree
Commit phase
- DOM Tree와 Virtual DOM Tree가 달라지면, commit phase에서 변경된 내용을 반영함
Rendering 최적화
- 불필요한 jsx element는 없는 것이 좋음
- 하나의 element가 바뀌어도 모든 element에 대해 확인하기 때문임
- key를 잘 지정해주어야 함
- 같은 배열에서 key는 유일해야 함
- 다른 배열에서의 key와는 같아도 됨
참고
- wanted pre-onboarding challenge React 강의