Virtual DOM 이란?

Virtual DOM(VDOM)

VDOM은 이름처럼 실제로 존재하는 것이 아니라 UI의 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍적인 개념이다.
그리고 VDOM과 실제 DOM을 동기화하는 과정을 재조정(reconciliation)이라고 한다.

DOM

DOM은 문서 객체 모델이라고 한다. 쉽게 이야기하면 브라우저에서 다룰 HTML을 파싱하여 문서의 구성 요소들을 객체로 구조화하여 나타낸 것이라 할 수 있다. 그리고 이 구조화된 객체를 사용해 스크립트 또는 프로그래밍 언어들이 제어할 수 있게 연결해주는 역할을 담당한다.

VDOM은 어떤 문제를 해결하기 위한 기술일까?

VDOM은 DOM 조작에 의한 rendering의 비효율성을 해결하고자 하는 기술이다. DOM을 반복적으로 조작하면 브라우저가 rendering을 자주하게 되고, 그만큼 pc의 자원을 많이 소모하게 된다.

브라우저의 rendering 방법을 짚어보면 아래와 같다.

1. HTML을 파싱하여 DOM객체를 생성하고, css를 파싱하여 스타일 규칙을 만든다.
2. 위 두가지를 합쳐서 실제로 웹 브라우저에 보여질 요소를 표현한 "render tree"를 생성한다.
3. 이 render tree를 기준으로 레이아웃을 배치하고 색을 칠하는 작업등을 한다.

DOM을 여러번 변경하게되면 위 과정을 여러번 반복하게 되고 그때마다 rendering을 하게 된다.

리액트 공식문서를 읽어보면 하나의 트리를 다른 트리로 변경하기 위한 최소 연산 수를 구하는 방법이 어느정도 복잡한지 알려준다. (최첨단 알고리즘이 뭔지 설명도 링크 걸려있던데 보기만해도 너무 아찔해서 아직 안 읽어봤다..ㅎㅎ)

VDOM은 문제를 어떻게 해결했을까?

React에선 rendering 비효율성의 해결책으로 VDOM이라는 DOM을 추상화한 가상 객체를 메모리에 만들어놓는 방식을 택했다.

React의 rendering 방식은 변경사항을 바로 실제 DOM에 반영하는 것이 아니라 중간 단계로 VDOM에 변경 내역을 한번에 모으고(버퍼링) 실제 DOM과 변경된 VDOM을 비교한 뒤 구성 요소의 변경된 부분만 찾아 변경하고 그에 따른 rendering을 한번에 처리하는 방식이다.
DOM과 VDOM을 비교할 때는 diffing 알고리즘을 사용하는데 공식문서에 잘 설명이 되어있다. 이걸 읽어보면 왜 그렇게 key가 필요하다고 하는지 알 수 있다.(간단히 설명하면 이 알고리즘은 개발자가 key prop을 작성해준다는 가정을 하고 만든 알고리즘이라 그렇다.)

VDOM은 완벽한 해결책일까?

VDOM은 나은 해결책일 뿐 완벽한 해결책은 아니다.

일단, 일정 시간마다 화면에 표현되야할 데이터가 바뀐다면 동시에 변경되는 것이 아니기 때문에 그때마다 rendering을 해줘야한다. 또, 아무리 VDOM을 사용한다고 해도 불필한 부분이 rerendering 되지 않도록 똑같이 최적화를 해야한다.

VDOM은 메모리에 존재한다. DOM에 준하는 무거운 객체가 메모리에 차지하고 있기 때문에 메모리의 사용이 많이 늘어날 수 밖에 없다.
Virtual DOM도 엄청나게 많은 컴포넌트를 조작하게 된다면 오버헤드가 생기기 마련이다.

이런 부분들이 있어도 Virtual DOM 제어가 DOM 직접 제어에 비해 상대적으로 비용이 적게 들기 때문에 VDOM을 사용하는 것이다.

참고자료

https://ko.reactjs.org/docs/faq-internals.html
https://ko.reactjs.org/docs/reconciliation.html