Virtual DOM이란 무엇인가?

Virtual DOM

 

MDN과 React 공식 문서에서는 각각 Virtual DOM을 이렇게 정의하고 있다.

MDN

The Virtual DOM is an approach whereby information about your browser's DOM is stored in JavaScript memory. Your application updates this copy of the DOM, then compares it to the "real" DOM — the DOM that is actually rendered for your users — in order to decide what to render. The application builds a "diff" to compare the differences between the updated virtual DOM and the currently rendered DOM, and uses that diff to apply updates to the real DOM. Both React and Vue utilize a virtual DOM model, but they do not apply the exact same logic when diffing or rendering.

React Docs

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.

 

Virtual DOM은 DOM의 복사본이자, HTML DOM의 추상화 버전이라고 할 수 있겠다.

 

웹 페이지의 어떠한 부분이 변경되어야 할 때, DOM의 전체 노드들이 다시 그려진다.

DOM 조작을 더 효율적으로 하기위해 나타난 것이 Virtual DOM

실제 DOM이 가지고 있는 api는 가지고 있지 않는다.

 

데이터가 변경되면 전체 UI는 VDOM에 렌더링 된다.

이전 VDOM의 내용과 업데이트 후 내용을 비교하여 변경된 부분만 실제 DOM에 적용시킨다.

즉, 데이터 변화가 일어나면 원본 DOM에 필요한 변화만 반영되어서 전체 DOM을 바꾸지 않고도 필요한 UI를 업데이트를 할 수 있다.

 

Virtual DOM의 동작 원리

VDOM은 html 객체에 기반한 자바스크립트 객체로 표현할 수 있다.

실제 DOM이아닌 메모리 상에서 동작하기 때문에 더 빠르다.

실제 렌더링 되지 않기 때문에 연산 비용이 최소화된다.

=> 모든 변화를 하나로 묶어서 한 번만 실행하기 때문이다.

실제 DOM 리렌더링보다 효율적이다.(DOM에 20개의 변화가 있다면 DOM 리렌더링은 20회 이루어질 것이다)

DOM에 접근하는 것은 지양해야 한다고 한다. 이는 DOM이 직접 변경된다면, 전체가 재렌더링 되기 때문에 브라우저에 과부하가 올 수 있기 때문이다.

무조건 Virtual DOM이 좋은 것인가?

정보 제공만 하는 웹페이지 -> 사용자와 인터랙션이 발생하지 않기 때문에 일반 DOM의 성능이 더 좋을 수도 있다.

SPA로 제작된 큰 규모의 웹 페이지에서 Virtual DOM을 사용하여 브라우저의 연산 양을 줄여 성능을 개선할 수 있다.