[React] VirtualDOM

1. VirtualDOM이 생겨난 배경

웹 개발에서 DOM(Document Object Model)은 HTML 문서를 개체로 표현한 구조를 말한다.

전통적인 방식으로는 웹 페이지 내용이 변경될 때마다 실제 DOM에 접근해 직접적으로 업데이트를 진행한다.

하지만, 이 과정에서 DOM 조작은 성능상의 부담을 줄 수 있다. 

이러한 문제를 해결하기 위해 나온 것이 Virtual DOM(가상돔)이다. 

 

1) 렌더링 과정에서의 성능 저하

이는 브라우저 렌더링 과정을 알면 이해하기가 편하다.

브라우저 렌더링은 DOM 트리 생성 > CSSOM 생성 > 렌더 트리 생성 > 레이아웃 > 페인트 과정을 거치게 된다.

DOM을 조작하게 되면, 위의 렌더링 과정이 다시 시작될 수 있다. 

 

즉, 해당 돔의 속성을 다시 그려야 할 수 있는 것이다. 

또한 해당 요소가 다른 요소와 연관되어 있다면, 그 요소까지 다시 배치해야 할 수도 있게 된다.

예를 들어, 페이지 상단에 위치한 요소의 크기를 변경하면, 그 아래에 있는 모든 요소들의 레이아웃을 다시 계산해야 할 수도 있다. 

 

 

2) 직접적인 DOM 조작에 대한 성능 저하 

자바스크립트에는 자바스크립트 엔진과 렌더링 엔진, 두 가지 주요 엔진이 있다.

자바스크립트 엔진은 코드를 해석하고 실행하는 엔진이다. 

Chrome의 V8이 자바스크립트 엔진의 대표적이 예이다.

 

렌더링 엔진은 DOM과 CSSOM을 사용해 레이아웃과 페인트 작업을 수행하여 웹 페이지를 화면에 표시하는 역할을 한다.

이 두 엔진은 독립적으로 작동하며 서로 정보를 주고 받는다.

 

여기서 DOM 트리는 자바스크립트로 조작할 수 있는 객체이지만, 브라우저 렌더링 엔진이 관리하게 되어있다.  

즉, 자바스크립트 엔진이 DOM을 변경하려하면, 브라우저 렌더링이 처리할 수 있도록 요청을 해야 하는 것이다.

이 과정에서 자바스크립트 엔진과 렌더링 엔진 간의 통신 비용이 발생한다. 

 

 

2. VirtualDOM의 동작 방식

ViretualDOM은 가상돔이라는 말 그대로 "DOM 처럼 생긴 객체"를 말한다. 

실제 DOM과 비슷한 트리 구조를 가며, 메모리 상에만 존재하며 브라우저의 실제 DOM과는 독립적으로 동작한다. 

이러한 가상돔이 어떻게 동작하는지 알아보자.

 

1) 초기 렌더링 : VirtualDOM 생성

애플리케이션이 처음 실행되면, react는 컴포넌트의 상태나 props를 사용해 가상돔을 생성한다. 

이 가상돔은 메모리 상에 저장되며, 실제 DOM에 반영될 준비를 하게 된다.

 

이 가상돔은 실제 DOM처럼 전체 문서를 포함한 복잡한 구조가 아닌, 메모리에서 쉽게 관리할 수 있는 자바스크립트객체이다.

따라서 빠른 연산이 가능하고, 자주 발생하는 UI 변경을 미리 처리해 실제 DOM에 대한 접근을 최소화한다. 

 

그렇게 초기 렌더링이 끝아면, 이 가상돔이 브라우저의 실제 DOM으로 변환되어 사용자 화면에 표시된다. 

 

 

2) 데이터 변경 : VirtualDOM 업데이트 

사용자의 상호작용이나 상태(State), Props가 변경되면 컴포넌트가 다시 렌더링되며, 가상돔도 업데이트된다.

전체 DOM을 다시 그리지 않고, 가상 DOM에서만 변경 사항을 처리한다. 

 

예를 들어, 사용자가 버튼을 클릭하면 해당 컴포넌트의 상태가 변경되었음을 감지하고, 

변경사항을 반영한 새로운 가상돔을 생성한다.

 

이 과정에서 가상돔은 입력된 데이터에 따라 UI가 어떻게 변화할지 예측하고, 이 예측 결과를 가상돔에 반영한다. 

 

 

3) Diffing(비교) : 변경된 VirtualDOM과 이전 VirtualDOM의 비교

Diffing 알고리즘을 통해 변경 된 가상돔과 이전의 가상돔을 비교하여 변경된 부분만 찾아낸다. 

 

*Diffing 알고리즘 :가상돔의 핵심 기술 중 하나로, 돔을 비교하여 변경된 부분만 찾아내는 역할을 한다. 

- 최소한의 비교 : 기존의 가상돔 트리와 새롭게 생성된 가상돔 트리를 비교하며 노드 단위로 어떤 부분이 변경되었는지 찾는다.

- 효율적인 비교 : 전체 트리를 일일이 비교하지 않는다. 부모 노드가 동일하다면, 자식 노드까지 세부적으로 비교하지 않는다.

- key 기반 비교 : 반복되는 요소를 비교할 때, key 속성을 이용해 변경 사항을 빠르게 추적한다. 

 

 

4) 실제 DOM 업데이트 : 최소한의 DOM 조작

Diffing 과정이 완료되면, 변경된 부분만 실제 DOM에 반경한다.

이를 DOM patching이라고 하며, 가상 돔의 변경 사항을 실제 DOM에 적용하는 단계를 말한다. 

 

변경 사항이 없는 DOM은 아예 조작하지 않으므로 불필요한 작업을 방지할 수 있으며, 이로 인해 성능이 크게 향상된다.

또한 batch(배치)처리로 각각의 DOM 업데이트가 독립적으로 이루어지지 않고, 한 번에 처리한다.

때문에 자바스크립트 엔진과 렌더링 엔진 간의 상호작용 횟수 또한 줄어들게 된다. 

 

 

 

3. VirtualDOM 장단점

1) 장점

- 효율적인 업데이트

전체 DOM을 다시 그리지 않고, 변경된 부분만 업데이트 하기 때문에 성능 최적화가 가능하다.

 

- 크로스 플랫폼

가상돔은 웹 뿐만 아니라 React Native와 같은 모바일 프레임워크에서도 사용된다.

따라서 가상돔의 개념은 특정 플랫폼에 종속되지 않고, 다양한 환경에서 사용할 수 있다. 

 

 

2) 단점

- 추가적인 메모리 사용

가상돔은 브라우저의 실제 DOM과 별도로 메모리상에 존재하는 자바스크립트의 객체이다.

즉, DOM이 두 개 존재하는 것이기 때문에 추가적인 메모리 사용이 발생한다.

 

- 복잡한 계산

복잡한 UI에서는 Diffing 알고리즘 계산 비용이 커질 수 있다.

Diffing 알고리즘의 시간 복잡도는 O(n)이므로, 트리 구조가 크고 복잡할수록 비교 작업이 오래 걸릴 수 있기 때문이다.

 

특히, 리스트나 테이블과 같이 대량의 DOM 요소를 다루는 복잡한 UI에서는 가상돔의 Diffing 과정이 느려질 수 있다. 

이런 성능 문제를 해결하기 위해 key 속성을 사용하지만, 이런 경우에도 데이터가 많을수록 시간이 걸릴 수 있다.