DOM과 Virtual DOM

DOM이란?

브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수한 텍스트이다. 이러한 HTML 문서를 브라우저에 시각적인 픽셀로 렌더링하려면 HTML 문서를 브라우저가 이해할 수 있는 자료구조로 변환하여 메모리에 저장해야 한다.

이때 브라우저 렌더링 엔진이 HTML 문서를 파싱하여 만든 자료구조를 DOM(Document Object Model)이라고 한다.

CSS 또한  DOM과 마찬가지로 파싱과정(바이트 - 문자 - 토큰 - 노드 -DOM 혹은 CSSOM) 을 거치며 CSSOM을 생성한다.

이후 DOM과 CSSOM은 랜더링을 위한 랜더 트리로 결합된다.

완성된 랜더 트리는 각 HTML 요소의 레이아웃을 계싼하는데 사용되며, 브라우저 화면에 픽셀을 렌더링하는 페인팅 처리에 입력된다. 이때 레이아웃 계산과 페인팅은 비용이 많이 드는 작업이다.

 

JS를 통해서 DOM 조작을 할 수 있다.

DOM 조작이란 새로운 노드를 생성하여 DOM에 추가하거나  기존 노드를 삭제 또는 교체하는 것인데, 이럴 경우 

변경된 DOM과 CSSOM은 다시 랜더 트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저의 화면에 다시 랜더링된다.

 

 

Virtual Dom이란?

React 공식문서의 설명에 따르면 아래와 같다.

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.

리액트의 VirtualDom에서의 재조정 과정은 아래와 같이 일어난다.

1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
2. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다.

DOM과 Virtual Dom의 리랜더링 비교

1. DOM (Real DOM) 리랜더링 과정:

• HTML 파싱: 브라우저는 서버로부터 받은 HTML을 읽어들여 파싱하여 DOM 트리를 생성
• CSS 파싱: 브라우저는 서버에서 받은 CSS를 파싱하여 CSSOM(CSS Object Model)을 생성
• 렌더 트리 생성: DOM 트리와 CSSOM이 결합되어 랜더 트리를 생성합니다. 이 단계에서는 화면에 표시될 요소들이 어떻게 배치되고 스타일이 적용될지 계산
• 레이아웃 (Reflow): 랜더 트리의 각 요소의 크기와 위치를 계산
• 페인트 (Repaint): 랜더 트리의 각 요소를 실제로 그리고 색칠하는 작업을 수행

2. Virtual DOM 리랜더링 과정:

• 가상 DOM 생성: React나 다른 라이브러리는 실제 DOM과 동일한 구조를 가진 가상 DOM을 메모리에 유지
• 컴포넌트 상태 변경: 사용자 상호작용 또는 어떤 이벤트에 의해 컴포넌트의 상태가 변경되면, 가상 DOM 내의 해당 컴포넌트를 업데이트
• 가상 DOM 비교 (Reconciliation): 이전 가상 DOM과 새로운 가상 DOM을 비교하여 어떤 부분이 변경되었는지를 효율적으로 찾음
• 변경된 부분만 감지: 변경된 부분은 새로운 가상 DOM에만 적용되고, 실제 DOM과 비교하여 변경된 부분만을 실제 DOM에 반영
• Layout과 Paint 부분만 재실행: 변경된 부분에 대한 레이아웃과 페인팅 부분만을 다시 실행

 

Virtual DOM의 등장 이유

이제 DOM과 Virtual DOM에 대해서 알게 되었는데, 왜 Virtual DOM이 등장하게 되었는지에 대해서 알 필요가 있다.

과거 정적이던 웹페이지가 점점 사용자와의 상호작용이 많은 동적인 Applicatoin이 되고 있다. 이런 과정에서 웹에서 JS를 통한 유저와의 상호작용이 점점 많아졌는데, 이를 매번 리랜더링 하는 것은 큰 비용이 든다.

 

이때 리랜더링 비용을 절약하기 위한 방법이 Virtual DOM이다.

Virtual DOM에서는 서로 다른 두 개의 트리를 비교하여, 변경된 부분에 대한 레이아웃과 페인팅 부분만을 다시 실행한다.

이러한 이유로 가상 돔이 첫 랜더링은 DOM보다 느릴 수 있으나, 동적 웹에서 더욱 효율적인 리랜더링이 된다는 강점을 가진다.