21.06.05 Virtual DOM

Virtual DOM을 알아보기 전에 HTML이 웹 브라우저에 표현되기까지의 과정을 이해하는 것이 필요하다. 

 

✔브라우저 Rendering Workflow

Webkit Rendering Workflow

▶ HTML

   <div> ~~ <div> 와 같은 elements로 이루어진 HTML을 브라우저에 전달한다.

▶ HTML parsing

   브라우저 Render Engine이 코드를 분석(parsing)한다.

▶ DOM Tree

   elements를 기준으로 DOM nodes를 생성하고 이 DOM nodes로 이루어진 DOM tree를 만든다.

▶ Render Tree

   DOM tree에 node가 생성될 때마다 동기적으로 attach method를 실행하여 그에 따른 Render Tree를 생성한다. 

*attach method : 외부 CSS 파일 또는 element의 inline style을 parsing하고 객체 형태로 반환한다. 

▶ Layout

   각 node의 스크린 상 좌표를 지정하여 위치를 잡는다.

▶ Painting

   paint method 실행하여 색을 입힌다. 

 

✔DOM Re-Render 

정적인 HTML 페이지가 아닌 한 페이지에서 다양한 DOM 조작이 일어나는 SPA(Single Page Application)과 같은 경우에는 elements를 추가, 수정, 생성하는 등의 DOM 수정을 하게 되면 위에서 설명한 Render Tree 생성, Layout 생성, Paint 과정이 전부 re-computing, re-rendering된다. 이 문제점을 해결한 것이 virtual DOM이다. React, Vue에서 불필요한 리렌더링을 하지 않기 위해 virtual DOM을 사용한다. 

 

✔virtual DOM(VDOM)이란?

local memory에 Virtual DOM을 생성하여 브라우저에서 Render 요청하기 전에 변경점을 비교하여 최종적으로  브라우저 DOM에 전달한 후 Render한다.

 

✔Virtual DOM을 쓰는 이유는?

컴포넌트에 변경점이 생기면 묶어서 DOM fragment에 적용한 다음 브라우저 DOM에 전달하면 되지만 이 과정은 어떤 부분이 바뀌었고 어떤 부분이 바뀌었는지 개발자가 직접 파악해야 한다. 이 역할을 자동화한 것이 virtual DOM이기 때문에 virtual DOM을 통해 DOM 관리를 하는 것이다. 제일 핵심적인 이유는 컴포넌트의 변경사항에 대해 불필요한 리렌더링이 일어나는 것을 막기 위해서 이다!!