가상돔(Virtual DOM)?

들어가기

Vue.js를 공부하면서 가상돔(Virtual DOM)라는 생소한 용어를 접하고 그 내용을 정리한 글이다.


요약

간단히 후려치면, 가상돔(Virtual DOM)이란 브라우저를 위한 버퍼정도라고 생각된다.


가상돔(Virtual DOM)이란?

Vue.js를 공부하다 보니, Vue.js 2.0버전 이후로 가상돔(Virtual DOM)을 사용하기 때문에 빠르고 효과적으로 html 화면을 렌더링 한다고 나와있다.

여기서 이 가상돔은 Vue.js 만의 고유한 기술이 아니다. React 진영에서 앞서 사용했으며, W3C에서도 Shadow DOM 이라는 가상돔 표준안을 가지고 있다고 한다.

가상돔을 이해하기 위해서는 일단 브라우저가 hmtl을 화면에 그리는 일련에 과정을 알아야 한다. 브라우저는 html를 읽어서 DOM 트리, CSS 트리를 만들고 DOM이 화면에 있어야할 위치를 잡고 거기에 그리고 색을 채운다.

브라우저가 HTML을 그리는 과정

여기 까지는 전혀 문제가 없다. DOM이 아무리 많던, 복잡하던 상관 없다. 브라우저는 위와 같은 일을 위해 만들어진 녀석이니깐

하지만 여기 브라우저를 위협하는 요소가 생겼다. 예전과 같이 그냥 단순히 HTML을 서버에서 받아서 한번에 그리고 땡 하는것이 아니라. SPA(Single page application) 같은 것들이 생겨나면서, html녀석이 자바스크립트와 그의 친구들을 이용해서 자꾸 DOM을 수시로 변경해달라고 브라우저에게 요청한다.

브라우저는 착한녀석이라 요청이 오는대로 일을 하려한다. 노드가 1000개쯤(예를들어)있는 DOM 트리를 뒤져서 특정 노드를 찾아 width를 조금 넓혀주고 다시 CSS트리를 만들고 합치고, 화면에 스케치하고 색을 채운다. DOM 수정요청이 100번 온다면 브라우저는 위와 같은 짓을 100번 한다.

즉 브라우저는 실시간 DOM 수정요청으로 그림을 다시 그리는데, 그닥 효율적이지 못하다.

이런 브라우저의 단점을 도와주는 녀석이 가상돔(Virtual DOM)이다. 만약 100번의 DOM 수정 요청이 오면, 가상돔은 브라우저 대신 DOM 변경을 인지하고 그 내용을 가상돔에 반영한다.(아직 화면에 그리지 않음) 이 변화를 반영한 가상돔의 내용을 브라우저에게 전달하여 그리게 한다.(100번 그리던 것을 1번만 그린다.)

사실 가상돔(Virtual DOM)이라는 말이 어려워서 그렇지, 그냥 브라우저의 DOM과 렌더링을 위한 버퍼역할을 하는 것이다.

컴퓨터 그래픽스에서 연산되어 출력되는 영상의 화면 끊김을 방지하기 위해 2중버퍼, 3중버퍼 같은 것을 가지고 있는데 가상돔(Virtual DOM)가 브라우저에서 그 역할을 하는듯 보인다.


참고자료

React 가상돔 설명 유튜브 React 가상돔 관련글 번역 포스트