[240207] 리액트의 가상 돔(Virtual DOM)

1. 가상 돔(Virtual DOM) 이란?

• 웹페이지가 표시해야 할 DOM을
• 일단 메모리에 저장하고,
• 리액트가 실제 변경에 대한 준비가 완료됐을 때
• 실제 브라우저의 DOM에 적용
• 이러한 가상 돔은, 파이버(Fiber)라는 아키텍처로 구성되어 있다.

 

---

2. 리액트 파이버(React Fiber)

• 하나의 element에 파이버 하나가 생성되는 1:1 관계

파이버가 하는 일

• 작업을 작은 단위로 분할한 다음, 우선순위를 매긴다.
• 이러한 작업을 일시 중지하고 나중에 다시 시작할 수 있다.
• 이전에 했던 작업을 다시 재사용하거나 필요하지 않은 경우에는 폐기할 수 있다.

⏩️ 이러한 작업들이 모두 비동기로 일어난다.

 

파이버 구현체의 주요 속성

• tag: element 1:1 매칭 정보 (리액트 컴포넌트, DOM노드, ...)
• staeNode: 파이버 자체에 대한 참조
  • 리액트가 이 참조로 접근
• child, sibling, return: 파이버 간의 관계 (자식, 형제, 부모)
  • children이 아니라 하나의 child만 가진다!
  • 이 child는 항상 첫 번째 자식의 참조
• index: 여러 형제들 사이에서 자신이 몇 번째인지 표현
• pendingProps: 아직 작업을 처리하지 못한 props
• memoizedProps: pendingProps를 기준으로 렌더링 완료된 이후, pendingProps를 여기에 저장
• updateQueue: 상태 업데이트, 콜백 함수, DOM 업데이트 등 필요한 작업을 담는 큐
• memoizedState: 함수 컴포넌트의 훅 목록 저장
• alternate: 반대편 트리 파이버

 

언제 파이버가 실행되는가?

• state 변경
• 생명주기 메서드 실행
• DOM 변경

⏩️ 항상 바로 처리하는 것이 아니라, 스케줄링 하기도 함.

 

리액트 파이버 트리

• Current 트리: 현재 모습을 담은 파이버 트리
• WorkInProgress 트리: 작업 중인 상태를 나타내는 파이버 트리

출처: 모던 리액트 딥 다이브

• 더블 버퍼링: 포인터만 변경해 workInProgress 트리를 현재 트리로 바꾸는 기술
  • 새로운 그림을 그리는 중 해당 작업이 사용자에게 노출된다면? ⏩️ 불완전한 트리 노출
  • 이를 방지하기 위해 새로운 그림이 완성되면 현재 상태를 새로운 그림으로 바꾸는 기법

 

---

3. 파이버 트리의 생성 과정

1️⃣ beginWork()로 파이버 작업 시작

2️⃣ 더 이상 자식이 없는 파이버를 만날 때까지 beginWork()수행

3️⃣ 자식이 없는 파이버를 만나면 completeWork() 수행

4️⃣ 형제가 있다면 형제로 넘어가 1️⃣부터 반복

5️⃣ 3️⃣, 4️⃣ 작업이 모두 끝나면 return(부모)으로 돌아가 completeWork()

6️⃣ 이렇게 거슬러 올라가면서 루트 노드가 완성되는 순간, 최종적으로 CommitWork() 수행, 이 중 변경 사항을 비교해 업데이트가 필요한 변경 사항이 DOM에 반영

 

⏩️ 업데이트 발생 시에는 되도록 새로 파이버를 새로 생성하지 않고 기존 파이버에서 업데이트된 props를 받아 파이버 내부에서 처리

---

4. 결국 가상 DOM의 목적은

• 브라우저의 DOM을 더욱 빠르게 반영하는 것이 아니다!
• 값으로 UI를 표현하는 것