[React] 리액트팀은 왜 가상 돔을 만들었을까?

사용자가 브라우저 주소창에 주소를 입력하면 어떤 일이 발생할까?

1. 브라우저가 사용자가 요청한 주소를 방문해 html을 다운받는다.
2. 브라우저의 렌더링 엔진이 html 을 파싱해 DOM 트리를 만든다.
3. 2 과정에서 CSS 파일을 만나면 CSS 파일을 다운받는다.
4. 브라우저의 렌더링 엔진이 CSS 트리인 CSSOM을 만든다.
5. 브라우저는 만들어진 DOM트리를 순회한다. 이 과정에서 사용자의 눈에 보여지는 부분만 순회한다. 이를 통해 트리를 분석하는 과정을 빠르게 할 수 있다.
6. DOM 트리에서 눈에 보이는 노드에 대한 CSSOM 정보를 찾아 노드에 적용해 렌더트리를 만든다.
   1. 레이아웃(Reflow): 노드가 브라우저 화면에 어느 좌표에 위치해야하는지 계산하는 과정
   2. 페인팅(Repaint): 레이아웃단계를 거친 노드에 색, 이미지 같은 유효한 모습을 그리는 과정

사용자 인터렉션에 의해 DOM이 변경되었을 때는 어떻게 동작할까?

어떠한 인터렉션에 의해 DOM에 변화가 생길 때, 브라우저는 위 과정을 반복하며 렌더 트리를 다시 만든다.

1. Layout부터 발생하는 경우 (Reflow): 레이아웃의 높이, 너비 등 변화
2. Paint부터 발생하는 경우 (Refaint): 이미지, 색상 등 변화
3. 레이어의 합성만 다시 발생하는 경우 (Composite): transform, opacity 속성 등

composite(합성) 단계는 여러 레이어로 나누어진 픽셀값들을 우리가 실제로 보는 화면처럼 합성해주는 단계이다. paint단계에서 만들어진 레이어들을 순서대로 합성해 유저에게 보여준다.

이 과정을 이해하고 있다면 렌더링 최적화 과정을 진행할 수 있다.

예시로 애니메이션을 구현할 때, position과 transform을 선택할 수 있는데 position의 경우는 layout이 변경되어 reflow단계부터 트리가 재구조화된다면, transform은 coposite단계부터 변화가 적용되어 레이아웃과 페인트 과정을 감소시킬 수 있기 때문이다.

왜 리액트팀은 가상 DOM을 만들게 되었을까?

과거 전통적인 웹사이트는 하나의 문서에 전달되는 정보의 양이 적었다. 그렇기 때문에 DOM이 변경되어도 서버에서 완전히 새로운 페이지를 내려주는 방법이 가능했지만, 현대 웹 사이트는 유저 인터렉션이 빈번하게 발생할 뿐더러 다뤄지는 데이터 양도 많다.

이러한 문제를 해결하기 위해 SPA가 등장했다. SPA는 ‘단일 페이지 어플리케이션’으로 웹 사이트에서 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 변경하는 기술이다. 이러한 SPA 방식은 하나의 페이지에서 모든게 이루어지기 때문에 자바스크립트에 의한 DOM 조작이 빈번하게 발생해 브라우저의 성능을 저하시킨다.

이러한 단점을 극복하기 위해, 리액트 팀은 가상(Virtual) DOM을 만들었다. 가상 DOM의 장점은 변경된 부분만 실제 브라우저 DOM에 적용할 수 있다는 것이다. 또한, 가상 DOM은 실제 브라우저 DOM에 직접 접근하는 것이 아니라 메모리에 저장되는 객체이므로, 가상 DOM에 접근하고 수정하는 과정은 매우 빠르게 이루어진다.

리액트는 두개의 가상 DOM을 가지고 있다.

1. 렌더링 이전 화면 구조를 나타내는 가상 DOM (Virtual DOM)
2. 렌더링 이후 화면 구조를 나타내는 가상 DOM (New Virtual DOM)

Reconciliation: 재조정

리액트는 상태가 변경되어 리렌더링이 일어날 때 마다 실제 브라우저가 그려지기 전에 두개의 가상 DOM을 생성한다. 이후 diffing알고리즘을 통해 변화가 발생한 노드만 실제 브라우저 DOM에 적용한다.

Batch Update

10개의 노드가 변경 되었다고 가정했을 때, 하나씩 순서대로 적용되는 것이 아니라 변경 사항을 한번에 모아서 실제 DOM에 적용한다.

정리

리액트 가상 DOM은 자바스크립트 객체이기 때문에 접근하고 수정하는 속도가 빨라 실제 변경된 부분을 빠르게 파악할 수 있다. 이 변경된 부분만 한번에 모아서 실제 DOM에 적용시키기 때문에 브라우저 성능도 개선할 수 있다. 다만 UI 변경이 적고 브라우저에서 보여주는 데이터가 적을 경우에는 SPA 프레임워크없이 기존 웹 사이트 개발 방식을 선택해 개발하는 것도 좋은 방법이다.