원티드 프리온보딩 프론트엔드 챌린지 4월 - 리액트 해부학
[Week 1-1] React가 VirtualDOM을 활용하는 방법
VirtualDOM, Reconciliation, Fiber
- createRoot()과 render()의 역할
- React가 Reconciliation을 통해 화면을 그리는 방법
- Fiber Reconciler의 rendering효율 개선
- [아하!모먼트] 면접에 대비하는 주니어 프론트엔드 개발자를 위해
Tips
vite
- 웹팩을 대체하는 번들러 (컴파일러 툴)
- 빌드가 매우 빠르다
0. VirtualDOM의 역할
1. 최적화된 업데이트
화면 중 일부만 렌더링하면 되는 경우 : VirtualDOM에서 미리 적용해보고 변경된 부분만 렌더링
2. 텍스트에 비해 애니메이션이 더 빠른 업데이트 필요 (작업 부피가 크므로. 초당 20프레임...)
1. createRoot()과 render()의 역할 (VirtualDOM 중심으로)
createRoot()
- root node를 리턴하는 함수
1. HostRoot 노드 생성
- 실제 DOM tree에서와 함께 VirtualDOM Tree에도 루트 노드(HostRoot,
<div id=root />를 나타내는 node)를 생성
2. HostRoot에 이벤트 위임
- [실제 DOM] root element에 이벤트 모두 위임
- [VirtualDOM] HostRoot에 이벤트 모두 위임
root.current: VirtualDOM의 HostRootcontainer: 실제 DOM의 root node (div 엘리먼트)
Fiber
- 엘리먼트 하나하나 (
<div />등...) - HostRoot는 Fiber 단위
- work : Fiber를 없애거나 추가하거나 옮기는 등의 작업
render()
- 2단계의 작업으로 나누어짐
Render phase: virtualDOM에 미리 그려보는 작업Commit phase: 실제 브라우저에 띄우는 작업
- render 과정을 3단계로 나눈 것
1) 렌더 시작 (주방에 주문 전달)
2) 컴포넌트 렌더 (주방에서 요리)
3) DOM에 commit (손님 테이블에 놓아줌)
- trigger : 최초 렌더링, setState 등으로 상태 변했을 때 등 rendering을 일으키는 계기
2. React가 Reconciliation을 통해 화면을 그리는 방법
- Reconciliation : 중재
- VirtualDOM에 변경 사항을 적용한 것과 기존 tree를 비교해서 차이를 알아내는 것
- DFS 방식으로 변경사항을 탐색 (모든 노드를 다 훑어보는 것!!)
- 다 훑어보고 나서 Root node로 복귀(return)
Render Phase
- DFS 방식으로 탐색/작업
- 계속해서 node들이 각 단계를 거치며 작업
- tag 숫자는 임의로 지정해놓은 것.
tag : 3이 root node
Commit Phase
- Render Phase에서 알아낸 변경사항
- WIP 큐에서 작업한 것을 브라우저(Current)에 어떻게 보내줄까?(commit을 어떻게 할까?)
👉🏽 Current가 가리키는 포인터가 바뀌는 것. WIP의 root node가 그대로 Current의 root node가 됨.
- WIP : 업데이트 사항이 반영되는 중인 DOM tree (다음 렌더링에 사용될 트리)
3. Fiber Reconciler의 rendering 효율 개선
불필요한 태그 사용 자제
- 불필요한 태그(Fiber 단위)는 넣지 말자
👉🏽 모든 Fiber 단위를 다 한 번씩 훑어봐야 하므로
👉🏽 빈 태그(<></>)도 탐색에 포함되니까 자제하자..
key 잘 지정하기
- key가 바뀌면 해당 배열의 요소들(child node)을 전부 새로 만들어버림. unshift 등 앞에 요소를 집어넣어서 key를 바뀌게 만드는 것을 자제하자..
- key는 서버에서 주는 것을 쓸 것 (uuid..?)
