Virtual DOM

React는 가상 돔(Virtual DOM)을 사용한다고 알려져 있다.

가상 돔에 대해 얘기하기 전에 간단하게 돔(DOM)에 대해 살펴보자.

돔(DOM)은 Document Object Model의 약자로 문자 그대로 문서 객체 모델을 말한다.

말이 좀 어려운데 간단히 말하자면, 우리가 브라우저에서 자바스크립트를 사용하여 수많은 노드에 접근 및 조작하기 위해서는 ~~의 경로를 이용하면 된다, 이 페이지는 이런 식으로 구성되어 있다 등을 알려주는 트리형태의 객체 모델이다.

그렇다면 과연 가상 돔은 무엇일까?

문자 그대로 생각해보자. "가상"의 "돔"이다. 우리가 알고 있는 기존의 돔과 별개로 가상으로 존재하는 돔을 말하는 것 같다.

그럼 기존의 돔이 존재하는데 굳이 가상돔이라는 개념을 만들어 사용하는 이유가 무엇일까?

한번 기존의 페이지의 구성 노드에서 변경이 일어나는 경우를 생각해보자.

돔은 기본적으로 트리형태이기 때문에 변경이 일어난 노드를 확인하려면 여러 부모 노드를 거쳐 해당 노드를 확인 후, 변경사항을 적용하기 위해 다시 CSS를 파싱하고 새로운 돔트리를 생성한다. 이 돔 트리를 기반으로 레이아웃을 그려야하고, 변경 내용이 여러개라면 여러번의 리렌더링 과정을 거치기 때문에 필요이상의 리소스가 소모된다는 단점이 있다.

이 단점을 해결하기 위해 생겨난 개념이 바로 가상 돔이다.

돔트리에 변경이 일어나게되면, 기존의 돔과 동일한 돔과 변경이 일어난 후의 돔이 생성된다. (이때 이 가상돔은 JS객체로 메모리 안에 저장된다.)

이 두개의 가상돔을 비교하여 어떤 노드가 어떻게 변경되었는지를 찾아서 변경된 부분만 실제 돔에 한번에 적용한다. 즉, 몇개의 변경이 일어는지와 상관없이 실제 돔에는 1번의 리렌더링만 실시되는 것이다.