[07-React] 4. React에서 render와 commit

1. 기본적인 DOM과 WB의 Rendering 과정

: Rander Tree = DOM Tree + CSSOM Tree

1.1 첫 방문 -> WB의 Rendering 과정

1. 페이지 방문-> HTML 파일 로드
2. WB의 렌더링 엔진 -> HTML 파싱 및 DOM 트리 생성
3. (2)에서 CSS파일을 만나면 CSS 파일 로드 및 WB 렌더링 엔진을 통한 CSSOM 트리 생성
4. WB는 DOM트리의 노드 순회 -> 사용자의 현재 페이지의 구성 노드만 방문(display:none 같은 안보이는 건 방문 X)
5. 방문한 노드에 대한 CSSOM 노드 탐색 및 CSS적용
   - layout( or reflow) : 각 노드가 화면 어느 좌표에 나타는지 계산하는 과정 -> 반드시 이후에 페인트를 함
   - painting : 레이아웃 단계를 거친 노드에 색, 형태 등의 실제 모습을 적용

출처 : asac 수업 자료, 애런 쵝오....

---

1.2 슬픈 점...

- 문제가 되는 상황

    1) 하나의 이벤트가 다수의 DOM을 변경
    2) 변경이 잦은 페이지의 경우

         -> 필요한거만 한번에 바꾸고 싶은데..!!

 

: 사용자와 상호작용하는 경우에 레이아웃과 리페인팅을 다시금 호출 -> 위의 방법은 하위의 모든 자식이 리렌더링

: SPA에서 리렌더링은 자주 일어남 -> 화면은 부드럽지만 DOM관리 부담 증가

---

 

 

2. VDOM과 React Fiber

2.1  VDOM

: 리액트가 관리하는 가상의 DOM - JSON 형태임을 유의

: 상태 변경 시, 표시해야할 DOM을 메모리에 저장 -> react-dom에서 준비가 완료되었을 때, WB에 한번에 반영

-> 반복적인 렌더링에 대해 렌더링 과정 최소화 및 부담 완화

---

2.2 React Fiber

: 이전의 스택기반 조정 알고리즘의 동기식 처리의 문제를 해결하기 위해 등장

: 리액트 안의 파이버 재조정자(fiber reconciler)가 관리하는 JS객체

: 모든 작업은 비동기로 진행

역할	1) 작업을 작은 단위로 분할-> 우선순위 랭크 2) 해당 작업은 정지 및 재시작 가능 3) 이전 작업 재사용 또는 폐기 가능

구현	Render Phase	- 사용자에게 노출되지 않는 비동기 작업 수행 - 해당 단계에서, 파이버의 작업, 우선 순위 지정, 중지, 폐기 진행 - 모두 처리 완료 시, finishedWork() 호출
	commit Phase	- DOM에 실제 변경 사항을 반영하기 위한 작업 - commitWork()가 실행 - 동기적 작업 처리, 작업 중 중단 x

• 파이버 재조정자(fiber reconciler)
  1) 파이버 관리
  2) VDOM과 DOM의 변경 사항을 비교 및 수집 -> 갱신이 있을 경우 파이버를 기준으로 렌더링 요청
  
• 재조정(reconciliation)
  : VDOM과 DOM을 비교하여 어떤 노드를 렌더링해야하는지 추적하는 과정

---

2.3 React Fiber Tree

• 구성(2개의 트리로 구성)
  - 현재 DOM의 모습을 담은 트리(current)
  - 작업 중인 상태인 workinProgress 트리
• 더블 버퍼링
  : 파이버의 작업 완료 후, 실제 DOM 트리를 가리키는 포인터를 workinProgress 트리로 전환
  : 커밋 단계에서 수행

---

2.4 fiber 작업 순서 정리

출처 : ASAC 수업자료

1. 업데이트 요청
   : 상태나 속성의 변경을 통해 React에 업데이트 요청
   : 해당 상태에 종속된 노드를 추적 및 리렌더링 준비 ( => 즉, 상태 변화에 따라 리렌더링 발생 여부 결정)
   
   
2. work in progress
   : beginWork() 호출 -> 파이버 작업 시작 -> 작업 후 completeWork()를 호출하여 작업 완료를 알림
   : 작업을 반영한 VDOM Tree인 workinProgress Tree 생성 및 렌더링 작업 진행
   : 순서에 따른 깊이 탐색을 통해 형제 노드를 확인함
   
   
3. Reconciliation
   : current 트리와 workinProgress 트리 비교 -> 차이에 대한 최소한의 변경 사항만 업데이트
   : VDOM의 경우, JS객체 형태로 변환되어 비교
   
   => JSX → JS → JSON : JSX 는 컴파일 시 Babel 통해 JS 로 변환, 런타임에서는 JSON 으로 변환
    

   // jsx pragma(jsx 컴파일 옵션): React.createElement 대신에 h를 사용하라고 Babel에게 전달
   /** @jsx h */ 
   const a = (
     <ul className="list">
       <li>item 1</li>
       <li>item 2</li>
     </ul>
   );
   
   // 위의 코드를 Babel이 아래와 같이 변환
   const a = (
     h('ul', { className: 'list' },
       h('li', {}, 'item 1'),
       h('li', {}, 'item 2'),
     );
   );
   
   // h함수(직접 생성한 헬퍼 함수)를 실행하면 JSON(Virtual DOM 표현)가 반환됨
   const a = (
     { type: 'ul', props: { className: 'list' }, children: [
       { type: 'li', props: {}, children: ['item 1'] },
       { type: 'li', props: {}, children: ['item 2'] }
     ] }
   );

   : 비교 완료 후, 변경된 부분만 바꾼 실제 DOM 렌더링을 1번만 트리거(다수의 리렌더를 "배치"를 통해 하나로 압축)
   
   
4. 작업 완료
   : finishedWork() 호출을 통해 변경된 사항이 준비 되었음을 알림
   
   
5. 커밋 준비(Commit Phase)
   : 위의 결과를 바탕으로 최소화된 DOM 업데이트 준비 및 업데이트
   
   
6. (Re)Paint : Web Browser Rendering
   : 최종 결과를 반영 - WB 리렌더
   : Painting (Web Browser Rendering) - React 는 제어권을 브라우저에게 위임하고 Paint 작업 진행
   : Cleanup useEffect → Run useEffect : 비동기 수행
   useEffect에서의 cleanUp은 중복된 이벤트 등록을 막기 위해 이전에 등록된 것을 한번 초기화
   

   • 웹 브라우저 렌더 순서 : Render Tree(DOM + CSSOM) → Layout(Reflow) → Paint(Repaint)
   • Side-Effect Hook 고려 시 : Render Tree → Layout → useLayoutEffect → Paint → useEffect
     - Paint 이전에 동기적으로 수행되는 useLayoutEffect : 웹페이지가 보이기까지의 시간을 지연
     - Paint 직후에 비동기적으로 수행되는 useEffect

---

 

- 깨알 결론 : 응애....아기 이런거 몰라

 

 

- 깨알 단어 사전

• DOM
  : Document Object Model
  : 웹 페이지에 대한 인터페이스
  : WB가 웹 페이지의 콘텐츠와 구조를 어떻게 버여줄지에 대한 정보를 담고 있음

---

참조

ASAC

모던 리액트 Deep Dive

https://amadaclub.tistory.com/42

[React Core Deep Dive] How does React re-render internally?