[WEB] Virtual DOM이란?

현재 프론트 엔드 시장의 리더는?

프론트엔드 프레임워크(라이브러리) 시장은 react.js와 vue.js가 양분하는 형태로 변화하고 있다. 사장되고있는 angular는 정말로 더 이상 사용되지 않는 모습을 볼 수 있다.

google trend에서 살펴본 react, vue, angular의 검색량

npm에서 살펴본 주간 다운로드수. react가 압도적으로 높고, 그 다음 vue가 따른다. angular와 svelte는 생각보다 더 다운로드 수가 적다.

 

확실히 react의 점유율이 압도적인 모습을 볼 수 있다. 요즘 떠오르는 svelte도 아직은 점유율이 매우 낮다.

 

 vue와 react는 분명히 다르지만, vue가 react의 개념을 많이 차용한 것이 사실이고, 이는 vue3의 composition api의 도입으로 react에게 한 발짝 더 가까워졌다.

 

 이런 vue와 react가 모두 사용하는 개념이 있는데, 그것은 바로 Virtual DOM(가상돔)이다.

 

DOM?

Virtual DOM을 보기 전에 DOM이 무엇인지 알아보자.

 

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 
출처  https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

(XML이야기는 있지만 본 게시글에서는 다루지 않는다. XML은 JSON과 같은 데이터 표현 방식중 하나이다.)

HTML은 프로그래밍 언어가... 아니다!

출처: Zetawiki

 HTML은 이름 그대로 Mark-up Language이다(표현을 위한 언어). 따라서 이를 프로그래밍 하려면 구조적으로(structured) 구성되어 프로그래밍 언어가 접근할 수 있어야한다. 예시를 들자면, 노트에 볼펜으로 작성한 글을 가지고 있다고 해서 워드에서 수정할 수 없지만, 이를 타이핑하여서 워드로 옮기고 난 다음에는 폰트와 색상과 같은 값을 접근하여 수정할 수 있는 것과 비슷하다.

 

 HTML이 DOM으로 구조적으로 구성될 때 각 컴포넌트 별로 위계관계도 정리되지만, 기능과 property들도 정의가 되고 속성으로 추가 되게 된다. 아래 예시를 보자.

 

var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/Element interface
for (var i = 0; i < tableAttrs.length; i++) {
  // HTMLTableElement interface: border attribute
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1";
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";

DOM 덕분에 table이란 id의 html element에 접근하여서 var table에 저장할 수 있고(구조), 그 변수의 property인 nodeName, border, summary등의 값을 수정할 수 있게 된 것이다. 

 

그래서 Vitual DOM은 뭐야?

Virtual DOM은 DOM을 본 뜬 복사본이다. Virtual DOM은 업데이트 사항들을 미리 반영하고, 기존의 DOM과 비교해서 변경이 필요한 부분만 찾아서 해당 HTML을 수정한다. 이렇게 복잡하게 HTML을 수정하는 이유는, 전체 페이지를 모두 수정하는건 시간이 너무 오래 걸리기 때문에 Rendering이 필요한 부분만 찾아서 효율적으로 작업을 수행하는 것이다.

 

 그러면 그냥 DOM으로 하지 않고 Virtual DOM으로 하는 이유가 무엇인가? 그것 또한 더 빠른 수행속도를 위한 것이다.

DOM은 옛날에 지정되었고, 이런 형태의 잦은 갱신을 고려하지 않은 API들을 가지고 있다. 따라서 이 API를 사용하지 않기 위해서 React나 Vue는 독자적으로 Virtual DOM을 만들어 놓은 뒤, 위 문단에서 설명한 작업을 진행한다.

 

주저리

사실 아직까지 작업을 하며 Virtual DOM, 아니 DOM에 대한 개념이 없어서 개발하는데 큰 지장을 준 적은 없었던 것 같다. 하지만 성능 개선이나 빠른 디버깅을 위해서 조금 더 정확한 개념을 잡기 위해 본 포스트를 작성한다.

 

Reference

React Virtual DOM 설명
https://ko.reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom

 

 

 

Vue Virtual DOM 설명

https://kr.vuejs.org/v2/guide/reactivity.html

 

Virtual DOM 관련 포스팅

https://bitsofco.de/understanding-the-virtual-dom/