모던 리액트 Deep Dive - 가상 DOM과 리액트 파이버 (1)

* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다.

 

DOM과 브라우저 렌더링 과정

• DOM은 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.

이미지 from 모던 리액트 Deep Dive

• 브라우저의 렌더링 과정
  1. 브라우저가 사용자가 요청한 주소를 방문해 HTML 파일 다운로드 받음
  2. 브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구선된 트리(DOM)를 만든다.
  3. 2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드 받음
  4. 브라우저 렌더링 엔진은 이 CSS 파일도 파싱해 CSS 노드로 구성된 트리(CSSOM)를 만든다
  5. 브라우저는 2번과정에서 사용자 눈에 보이는 노드만 순회하면서 방문함. 
     • display: none 방문X
  6. 눈에보이는 노드를 대상으로 해당 노드에 대한 CSSOM  정보를 찾고 여기서 발견한 스타일 정보를 노드에 적용
     • 레이아웃 (layout, reflow) : 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정. 이 레이아웃 과정을 거치면 반드시 리페인팅 과정도 거치게 됨.
     • 페인팅 (painting): 레이아웃 단계를 거친 노드에 색과 같은 실제 유효한 모습을 그리는 과정

가상 DOM의 탄생 배경

• 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이 든다.
• 현대 웹페이지 : 렌더링 + 렌더링 이후 사용자의 인터랙션으로 웹페이지 업데이트 됨.
•  SPA의 경우 페이지 변경 시 다시 HTML을 렌더링하는 것이 아닌 하나의 페이지에서 계속해서 요소의 위치를 재계산함. 즉, 라우팅 변경시 특정 요소를 제외하고는 대부분의 요소를 삭제, 삽입 위치 변경 과정의 작업을 진행해야됨 
  • DOM을 관리하는 과정에서 부담해야할 비용이 커짐
  • 개발자는 DOM의 변경 상황보다는 결과물만 알고 싶음
• 가상 DOM : 실제 브라우저의 DOM이 아닌 리액트가 관리하는 가상의 DOM
  • 웹페이지가 표시해야할 DOM을 일단 메모리에 저장하고 리액트가 실제 변경에 대한 준비가 완료 됐을때 실제 브라우저의 DOM에 반영한다. (여기서 리액트는 react-dom임)
  • 브라우저가 아닌 메모리에서 DOM 계산을 하는 과정에서 렌더링을 최소화할 수 있고 브라우저, 개발자의 부담을 덜어줌
  • 가상 DOM이 일반 DOM보다 무조건 빠른것은 아님( from 리액트 개발자 댄 아브라모프)
    • 무조건 빠른 것이 아니라 리액트의 이 가상DOM방식은 대부분의 상황에서 웬만한 애플리케이션을 만들 수 있을 정도로 충분히 빠름, 합리적으로 빠르다는 것.

가상 DOM을 위한 아키텍처, 리액트 파이버

• 가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 리액트 파이버다.
• 리액트 파이버 : 리액트에서 관리하는 평범한 자바스크립트 객체
  • 파이버는 파이버 재조정자 (fiber reconciler)가 관리하는데, 가상 DOM과 실제 DOM을 비교해 변경사항을 수집하며, 둘 사이에 차이가 있으면 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청함.
  • 재조정(reconciliation) : 리액트에서 어떤 부분을 새롭게 렌더링해야하는지, 가상 DOM과 실제 DOM을 비교하는 작업.
• 리액트 파이버의 목표 : 리액트에서 발생하는 애니메이션, 레이아웃, 그리고 사용자 인터랙션에 올바른 결과물을 만드는 반응성 문제를 해결하는 것.
  • 작업을 작은 단위로 분할, 우선순위 매김
  • 이러한 작업을 일시중지하고 나중에 다시 시작할 수 있음
  • 이전에 했던 작업을 다시 재사용하거나 필요하지 않은 경우 폐기할 수 있음.
• 모든 과정은 비동기로 일어남
• 과거 리액트의 조정 알고리즘은 스택 알고리즘으로 이뤄져 있었다.
  • 스택이 빌 때 까지 동기적으로 작업이 이루어지고 중간에 중단할 수 없었음 : 비효율적
  • 사용자 인터랙션 + 동시 다발적 이벤트와 애니메이션을 위해 스택 조정자 대신 파이버라는 개념을 탄생시킴
• 파이버는 컴포넌트가 최초로 마운트 되는 시점에 생성되어 이후에는 가급적 재사용됨
  • 리액트가 파이버를 처리할 때마다 이러한 작업을 직접 바로 처리하기도하고 스케줄링하기도 함

리액트 파이버 트리

• 두 개가 존재함
  • 현재 모습을 담음 : 파이버 트리
  • 작업중인 상태 : workInProgress 트리
• 리액트 파이버의 작업이 끝나면 리액트는 단순히 포인터만 변경해 workInProgress 트리를 현재 트리로 바꿔버린다. (= 더블 버퍼링)
  • 불완전한 트리르 보여주지 않기 위해 더블 버퍼링 기법을 쓰는데, 버퍼링을 위한 트리 두개가 존재하며 이는 커밋 단계에서 수행됨.