Virtual DOM

DOM이란

DOM은 Document Object Model의 약자로, 구조화된 문서를 표현하는 방법을 말합니다. HTML, XML 등에서 데이터를 표현하거나 상호작용하는데 사용됩니다. 웹 브라우저는 DOM을 사용하기 때문에 우리는 JavaScript와 CSS를 사용해서 상호작용할 수 있습니다.

브라우저의 작업 흐름

(1) DOM Tree가 생성됨 - 브라우저가 HTML 파일을 수신하면 렌더 엔진은 해당 파일을 구문 분석하고 HTML 요소와 1:1 관계를 가지는 Node의 DOM Tree를 생성합니다.
(2) Render Tree가 생성됨 - 인라인 스타일 구문과 외부 CSS 파일의 스타일이 구문 분석이 되며, DOM Tree의 node와 함께 Render Tree를 만드는데 사용됩니다.
(3) Layout - Render Tree를 생성한 후에는 'Layout' 프로세스를 거칩니다. Render Tree의 모든 node에는 화면에 표시되어야 하는 정확한 위치인 좌표가 제공됩니다.
(4) Painting - Render Tree가 통과되고 각 노드의 paint() 메소드가 호출되어 화면에 내용이 표시됩니다.

DOM의 문제점

DOM은 다이나믹 UI를 생성하는데 최적화되어 있지 않다는 점입니다. 만약 JavaScript를 사용해서 어떠한 태그의 색상을 업데이트 한다고 하면 해당 DOM node 객체에 접근하고 색상 속성을 업데이트 하면 됩니다. 이 때는 트리의 나머지 노드에 영향을 미치지 않습니다. 그러나 트리에서 하나의 노드를 추가하거나 제거할 때, 전체 트리를 다시 정렬해야 할 수도 있습니다. 이것은 비용이 많이 드는 작업이며, 브라우저에서는 시간과 브라우저 리소스가 필요합니다. 만약 하나의 노드를 추가하거나 삭제를 하여 웹 페이지 전체의 레이아웃에 영향을 받는 경우, 웹 페이지의 일부 또는 전체가 다시 렌더링 될 수 있습니다.

Virtual DOM이란

Virtual DOM이란 가벼운 버전의 DOM 복사본이라고 할 수 있습니다. 실제 DOM의 변경사항에 대해 DOM에서 수행해야 할 모든 변경 사항을 Virtual DOM에서 수행한 다음 실제 DOM에 전달함으로써 위에서 언급한 계산 단계가 줄어듭니다. 여러 번의 변경 사항이 있더라도 모든 변경 사항을 하나로 그룹화하여 한번만 수행합니다. 그리고 DOM 관리를 자동화하고 추상화하여 직접 할 필요가 없게 해줍니다. 또한 전체 DOM Tree를 relaod하지 않기 위해 변경한 부분과 변경되지 않는 부분을 직접 할 때는 추적해야 하나 이 또한 가상돔이 자동화해주는 것입니다.