33. Virtual DOM

ㅇVirtual DOM은 한국어로는 '가상 DOM'이라고 한다.

DOM은 Document Object Model의 줄임말인데, Document는 HTML, XML을 뜻하고 Object는 노드 트리라고 유추해볼 수 있다. 노드 트리에는 Root Element, 태그(element), 내용 text, element의 attribute등이 포함된다. 

HTML이 곧 DOM인 것은 아니다. DOM은 브라우저에서 로드되는 것이다. 내가 IDE에서 작성한 HTML이 브라우저에 의해 파싱되어 실제 문서를 나타내는 노드 트리가 DOM인 것이다. 

IDE에 작성된 HTML은 단순 문자열일 뿐이며, 결과물을 보기 위해서는 브라우저가 필요하다. 브라우저가 이해하기 위해서는 이 '문자열'이 노드(객체)로 변환되어야 한다. 

브라우저가 HTML을 전달받으면 이를 파싱하여 노드들로 이루어진 DOM Tree를 만든다. 그리고 여기에 외부 CSS파일과 각 노드들의 inline 스타일을 파싱하여 스타일을 입힌 Render Tree가 만들어진다. 

Render Tree가 만들어지면 각 노드들이 화면 어디에 나타나야 하는지에 대한 위치가 주어지며, paint()메서드를 호출하면 내가 구현하려던 화면이 출력된다. 

DOM은 이 과정을 반복한다. 따라서 간단한 텍스트 수정만을 하더라도 DOM은 처음부터 다시 HTML을 파싱하여 DOM Tree를 만들고 CSS를 파싱하여 Render Tree를 만들고, 레이아웃을 입혀 출력하는 일을 반복한다. 

이 과정이 매우 비효율적이기 때문에(현대의 웹페이지는 수십개에서 수백, 수천개의 페이지로 이루어지므로) Virtual DOM이 나오게 된 것이다.

Virtual DOM은 수정사항이 여러가지 있더라도 렌더링을 한번만 일으킨다. 

가상 DOM은 DOM이 생성되기 전, 이전 상태값과 수정사항을 비교하여 달라진 부분만 DOM에게 던져 렌더링을 진행하게 한다. 가상 DOM이 달라진 부분을 탐지하여 DOM에게 전달하기 때문에 DOM은 처음부터 렌더링을 다시 할 필요가 없는 것이다. 

"직접 DOM에 접근하는 것은 지양해야 한다"

이 말은 DOM에 직접 접근하게 되면 사소한 변경사항에도 전체가 재렌더링이 되기 때문에 브라우저에 과부하가 올 수 있어 이를 주의하도록 하는 말로 이해하면 되겠다. 

---

[보고 배운 글]

DOM과 Virtual Dom이란?

 

[크로미움의 DOM]

GitHub - chromium/chromium: The official GitHub mirror of the Chromium source