Virtual DOM이란 무엇인가?

돼지·2022년 4월 25일

개발공부

목록 보기

3/17

DOM ?

자바스크립트는 매우 동적으로 사용자와 상호작용하며 데이터를 주고받는다. 그러다 보면, DOM 조작을 통해 새로운 노드를 추가시켜야 할 때도 있고, 삭제시키기도 하는 등 복잡한 연산들이 발생한다.

실제 DOM을 계속 조작 하다보면 성능저하의 원인이 된다.

virtual DOM이란?

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

virtual DOM의 동작 방식

클래스형 리액트에서는 state나 props의 변화가 발생한다면, render()를 통해 새로운 React 엘리먼트 트리를 return합니다.

virtual DOM이 비교를 통해 변화 될 부분을 찾아내고 바꾸는 과정. 이를 재조정이라고 부릅니다.

virtual DOM은 엄연히 객체입니다. 정확히 말하면 DOM 같이 엘리먼트간 상하관계가 있는 트리구조의 객체죠.(아래사진)

이러한 트리구조의 객체를 최소한의 연산으로 바꾸는 알고리즘의 경우 O(n3)의 복잡도를 가진다고 합니다. (출처 - 리액트 공식문서)

따라서 엘리먼트가 많을 수록, 성능은 엄청 느려지게 된다고 합니다.

원리

각 컴포넌트가 반환하는 엘리먼트를 이전에 반환했던 엘리먼트와 비교하고(Reconcilation), 다른 경우에만 해당하는 DOM 노드에 CRUD 작업을 수행한다.
비교 방법은 깊이 우선 탐색방법(DFS)를 사용한다.
실행하여 얻은 새로운 Virtual DOM을 실제 DOM과 동기화되어 있는 기존 Virtual DOM과 비교해서 변경 사항을 파악한다(reconcilation). 그리고 실제로 변경된 부분만 DOM API를 호출하여 DOM에 반영하면, 브라우저가 변경 사항이 반영된 DOM과 CSSOM으로 새로운 Render Tree를 생성해서 화면을 다시 그린다.
(위에 그림을 보면 변경된 곳이 어떻게 Re-render되는지 알 수 있다.)