React - VirtualDOM, Fiber, Render

이소라·2023년 4월 6일
0

React

목록 보기
22/23

createRoot()

  • DOM Tree와 Virtural DOM Tree를 비교
  • Virtual DOM Tree에서 <div id = "root" />를 나타내는 node를 생성함

Virtual DOM의 역할

  1. 최적화된 업데이트로 사용자 경험 개선
    • 브라우저에 반영하기 전에 사전 작업을 하는 것
  2. 업데이트에 우선순위를 부여
    • Animation vs Text
    • 텍스트보다 애니메이션이나 이미지 업데이트가 더 먼저 일어나야 함



Fiber

  • React 렌더링/ 업데이터의 가장 작은 단위
  • work라고도 함
  • 효율적인 업데이트를 위해
    • work를 중지하고, 필요 시 다시 시작
    • 다른 종류의 work들에게 우선순위 부여
    • 이미 완료된 work를 재사용
    • work가 더 이상 필요 없게 되면 버림



render()

  1. Render phase
    • 업데이트를 수행해서 화면을 변경하는 것
  2. 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

renderPhase

  1. performUnitOfWork
  2. beginWork
  3. completeUnitOfWork
  4. completeWork

Current and work-in-progress

  • Current
    • 현재 브라우저에 보이는 DOM Tree
  • Work-in-progress
    • 업데이트 사항이 반영되는 중인 DOM Tree



Commit phase

DOMvsVirturalDOM

  • DOM Tree와 Virtual DOM Tree가 달라지면, commit phase에서 변경된 내용을 반영함

commit phase



Rendering 최적화

  1. 불필요한 jsx element는 없는 것이 좋음
    • 하나의 element가 바뀌어도 모든 element에 대해 확인하기 때문임
  2. key를 잘 지정해주어야 함
    • 같은 배열에서 key는 유일해야 함
    • 다른 배열에서의 key와는 같아도 됨



참고

  • wanted pre-onboarding challenge React 강의

0개의 댓글