[React] VDOM과 React lifecycle

※ 해당 내용은 유투브 채널 '가장 쉬운 웹개발 with Boaz' 의 React 까보기 시리즈를 듣고 정리한 내용입니다. 

---

1. VDOM

프로그래밍 컨셉으로 메모리 상에 UI 관련된 정보를 띄우고, react-dom과 같은 라이브러리에 의해 실제 DOM이랑 띄워놓은 정보랑 sync를 맞춘다. 이 과정을 reconciliation(재조정)이라고 하며 이때 reconciler가 관여한다. 

 

왜 가상(virtual)이야?! 

실제 DOM을 조작하는 일은 브라우저가 paint 해서 보여줘야하는 과정이 비용이 크다. 가상으로 하는 게 더 빠르고 비용이 적음.

 

VDOM 어떻게 구현되어 있지? 

- DOM node들이 fiber node (js 객체) 대체되어 구성된 tree 형태

- 더블 버퍼링 구조로 current tree와 workInProgress tree 가 존재

- current tree :  DOM에 mount된 정보들을 fiber node로 표현한 트리

- workInProgress tree : current에서 자기복제된 것으로 render phase에서 작업중인 fiber들로 표현된 트리. commit phase를 지나면서 current tree가 된다. 이때 기존의 current tree는 삭제되고 새로운 current tree를 자기복제하여 새로운 workInProgress tree를 생성한다. 

 

index.jsx

index.html

 

index.html에서 id가 root인 div를 가지고와 ReactDOM에 전달하여 root 을 리턴 받는다. 그리고 해당 root 아래에 App 컴포넌트를 렌더링한다. 

 

왜 더블 버퍼링 구조?

workInProgress 작업을 하다가도 언제든지 버리고 처음부터 다시 작업하거나 중지 혹은 restart 등 작업 우선순위에 맞게 유연하게 대처할 수 있다. 

 

2. React lifecycle

Render phase

VDOM 재조정(Reconciliation)이 일어나는 단계

- 변경점이 생겼을 때 element가 추가/수정/삭제 되는 단계

- WORK를 scheduler에 등록하여 scheduler가 타이밍에 맞게 실행

※ WORK : reconciler가 컴포넌트의 변경을 DOM에 적용하기 위해 수행하는 일로 이 WORK를 통해 render phase, commit phase가 진행된다. 

- reconciler 의 설계가 stack에서 fiber로 바뀌면서 abort, stop, restart 메소드 등을 호출하면서 렌더링 우선순위 변경 가능해졌다. (이 기능은 concurrent mode에서만 비동기적으로 이루어지며 현재 우리가 일반적으로 사용하는 legacy mode에서는 위 기능 없이 동기적으로 render phase가 동작한다. )

 

commit phase

재조정한 VDOM을 DOM에 적용 & 라이프사이클을 실행하는 단계. 

- DOM에 mount 되는 과정으로 paint 된다는 것은 아님.

- 일관적인 업데이트를 위해 sync(동기로) 실행. 즉, commit phase 중간에 paint되지 않는다.

- 리액트가 DOM 조작을 일괄처리 후 리액트가 콜스택을 비워주면 브라우저가 paint 시작.