Virtual DOM 이란?

안녕하세요

오늘은 Virtual Dom을 알아보겠습니다.

 

 

DOM ( Document Object Model )

---

 

 

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 

MDN에는 DOM을 위와 같이 정의하고있습니다.

 

웹 페이지는 일종의 문서(document)입니다.

DOM은 프로그래밍 언어가 이 문서에 쉽게 접근할 수 있도록 문서의 구성요소들을 구조화하여 표현한 객체입니다.

즉 웹 페이지의 객체 지향 표현입니다. 이렇게 구조화하였기 때문에 자바스크립트로 DOM을 수정할 수 있습니다.

 

 

 

 

Virtual DOM

---

DOM을 조작하게 되면 브라우저 동작 원리에 따라 Layout, Paint 혹은 Render Tree를 재생성해야 합니다.

 

브라우저 동작 원리

1. DOM Tree 생성, CSSOM Tree 생성

2. Render Tree 생성

3. Render Tree 배치 -> Layout(Reflow)

4. Render Tree 그리기 -> Paint (Repaint)

 

자세한 내용은 이 글을 참고해주세요.

 

 

복잡한 SPA(Single Page Application) 환경에서 DOM조작이 많이 발생합니다.

이렇게 되면 브라우저는 조작을 감지하고 그만큼 연산 과정도 늘어납니다.

만약 100개의 노드를 하나하나 수정했습니다. 변경된 사항을 사용자에게 보여주기 위하여 100번의 재배치, 리렌더링등이 일어납니다.

(실제로 100번이 일어나지는 않고 어느 정도 합쳐서 작업을 할 수 있습니다.)

 

이 문제점은 보완하기 위하여 Virtual DOM이 생겼습니다.

 

출처 : https://blog.bitsrc.io/incremental-vs-virtual-dom-eb7157e43dca

 

만약 UI가 변경되면 Virtual DOM에 먼저 적용시킵니다.

현재 DOM과 Virtual DOM을 비교하여 차이를 계산 후 변경되 부분을 실제 DOM에 전달해 줍니다.

 

 

아까의 예시를 들어 만약 100개의 노드 수정이 일어났으면, 바로 DOM에 렌더링 시키는 것이 아닌 가상의 DOM에서 계산 후 실제 DOM에서는 딱 한 번만 렌더링 하는 것입니다. 레이아웃 계산과 리렌더링의 규모는 커지지만 연산의 횟수는 줄어든다는 이점이 있습니다.

 

 

 

그렇다면 무조건 Virtual DOM이 좋은가?

---

무조건 Vurtual DOM이 좋다고는 할 수 없습니다.

 

* 가상 DOM은 메모리에 존재합니다.

메모리 사용량이 늘어날 수밖에 없습니다.

 

* DOM 조작을 제대로 작업하면 리액트, 뷰를 사용했을 때보다 빠릅니다.

Virtual DOM이 DOM 보다 빠르다. 라는 것을 잘못되었습니다.

그렇기에 리액트나 뷰를 사용한다 하더라도 똑같이 최적화를 해주어야 합니다. 그럼에도 사용하는 이유는 유지 보수와 확장성이 좋고 프로젝트를 운영하기에 충분히 빠르기 때문입니다. 또한 자동화 측면 때문에 생산성이 좋습니다.

 

 

 

참고 : 

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

https://jeong-pro.tistory.com/210

https://velopert.com/3236