Virtual DOM
React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 가상의 DOM 객체를 활용한다. Virtual DOM은 DOM 객체를 직접 조작하는 것이 아닌 가상의 DOM 객체에 접근하여 변화 전/후를 비교하고 바뀐 부분을 적용한다.
Virtual DOM은 JavaScript 객체로 이루어진 가상의 DOM 트리를 사용하여 실제 DOM 조작을 최소화하고 성능을 최적화하는 기술이다.
Real DOM (DOM)
DOM(Document Object Model)은 문서 객체 모델을 의미하며 문서 객체란 브라우저가 JavaScript와 같은 스크립팅 언어가 <html>, <head>, <body>와 같은 태그들에 접근하고 조작할 수 있도록 문서를 트리 구조로 객체화한 것을 의미한다. DOM은 브라우저가 HTML 문서를 조작할 수 있도록 트리 구조화한 객체 모델이다.
Real DOM은 DOM과 같으며 Virtual DOM과 구분하기 위해 사용되는 용어이다.
Virtual DOM의 등장 배경
DOM은 계층적 형태의 트리 구조로 구성되어 있다. 트리 구조는 데이터 저장의 의미보다 저장된 데이터를 빠르고 효율적으로 탐색하는 것이 장점인 자료구조이다. 그렇기 때문에 DOM은 JavaScript와 같은 스크립팅 언어가 접근하고 탐색하는 속도가 빠르기 때문에 변경 및 업데이트 속도 또한 빠르다.
하지만 DOM이 변경 및 업데이트 된다는 것은 브라우저의 렌더링 엔진 또한 리플로우한다는 것을 의미한다. 브라우저는 DOM 트리와 CSSOM 트리를 기반으로 Render 트리를 생성하고 각 요소가 배치될 위치와 크기를 계산(Layout)한 뒤 화면을 그린다.(Paint)
DOM이 변경되면 업데이트된 요소와 그에 해당하는 자식 요소들에 의해 DOM 트리를 재구축한다. 이 과정에서 레이아웃을 재연산하는 리플로우와 이를 화면에 그려내는 리페인트 과정을 거치는데 이때 변화가 필요없는 요소들까지 변경될 수 있다. JavaScript를 통한 DOM 조작이 많아질수록 반복적인 리플로우 및 리페인트가 발생하면서 DOM 업데이트 비용이 커지므로 웹 서비스의 성능이 저하되는 문제가 발생한다.
정리하자면, Virtual DOM은 반복적인 DOM 업데이트로 인한 성능 저하를 방지하기 위해 요소의 변화 전/후를 비교하여 변화된 부분만 효율적으로 렌더링하기 위해 등장하였다.
Virtual DOM을 사용하면
React는 리플로우와 리페인트가 자주 발생하는 문제를 해결하기 위해 DOM과 동일한 Virtual DOM을 메모리상에 만들고 DOM 조작이 발생하면 Virtual DOM에서 연산 수행 후 실제 DOM을 업데이트하여 리플로우 및 리페인트를 최소화하였다.
Virtual DOM은 실제 DOM과 동기화되어 상태가 변경될 때마다 가상 DOM을 새로 생성하고 이전 상태와 비교한다. 이후 변경이 필요한 부분만 실제 DOM에 반영하여 업데이트하므로 전체 UI를 다시 그리지 않아도 된다.
상대적으로 무거운 DOM에 비하여 Virtual DOM은 자바스크립트 객체로 이루어져 있기 때문에 실제 DOM과 동일한 속성을 가지고 있음에도 훨씬 가벼운 사본이라고 할 수 있다.
다만 Virtual DOM은 말그대로 가상이기 때문에 비교를 위해 사용되며 실제 DOM처럼 화면에 표시되는 내용을 직접 변경하는 것은 아니다.
Virtual DOM의 형태
가상 DOM은 추상화된 자바스크립트 객체의 형태를 가지고 있다.
const virtualDom = {
tagName: "html",
children: [
{ tagName: "head" },
{ tagName: "body",
children: [
tagName: "ul",
attributes: { "class": "list"},
children: [
{
tagName: "li",
attributes: { "class": "list_item" },
textContent: "List item"
}
]
]
}
]
}DOM과 마찬가지로 Virtual DOM 또한 HTML 문서 객체를 기반으로 한다. 또한 추상화만 되었을 뿐 평범한 자바스크립트 객체이므로 실제 DOM을 건드리지 않고도 필요한 만큼 자유롭게 조작할 수 있다.
Virtual DOM은 React에서 컴포넌트의 상태나 속성이 변경될 때마다 새로 생성되며 React는 이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분만 실제 DOM에 반영한다.
Virtual DOM의 동작 과정
-
React는 상태를 변경하는 이벤트가 발생했을 때 diffing 알고리즘을 통해 이전 상태의 Virtual DOM과 현재 상태의 Virtual DOM을 비교하여 변경된 부분을 감지한다.
-
이후 Reconciliation(재조정)을 통해 변경이 필요한 부분만 실제 DOM에 반영하여 업데이트 한다.
-
이 과정에서 여러 개의 상태 변화가 있을 경우 이를 일일이 수행하지 않고 일괄적으로 업데이트(Batch Update)하며 이를 통해 성능을 최적화하고 불필요한 리렌더링을 최소화할 수 있다.
React에서 상태를 변경할 경우 Diffing 알고리즘이 이를 감지할 수 있도록 직접 할당하는 것이 아닌 setState 메서드를 사용해 상태를 변경한다.
