Virtual DOM 이란?

DOM(Document Object Model) 은 위 그림처럼 브라우저가 HTML 문서를 파싱하여 생성하는 트리 구조로, 웹 페이지의 구조를 표현한다.

그리고 Virtual DOM 이란 DOM 구조와 같은 내용을 담고있는 복사본으로, 자바스크립트의 객체 형태로 메모리 안에 저장된다. 이러한 '가상 DOM' 은 복사본이기 때문에, 실제의 DOM 의 모든 노드 요소와 속성을 공유한다.

React 에서의 Virtual DOM

Virtual DOM 을 사용하는 이유

실제 DOM 에서 내용 요소의 변경이 있을 때마다 리렌더링을 적용하는데, 실제의 DOM 을 조작하여 렌더링을 하는 데에는 상당히 많은 비용이 발생한다. 하지만 이러한 DOM 의 복사본인 Virtual DOM 은 메모리상의 가벼운 객체일 뿐이므로, 조작하는데 비용이 적게 사용된다. 따라서 이러한 복사본을 활용하여 변경이 발생한 부분을 빠르게 식별하고, DOM 전체가 아닌 필요한 부분만 리렌더링 하는 것이 가능하다.

또, 가상 DOM은 컴포넌트의 상태를 추적하고 변경 사항을 처리하는 일관된 작업만을 진행하므로, 예측 가능하고 유지보수가 용이한 코드를 유지할 수 있도록 도움을 줄 수도 있다.

그래서 React 는 성능 향상과 부드러운 사용감을 제공하기 위해 Virtual DOM 을 활용한다고 볼 수 있다.

Virtual DOM 을 활용한 리렌더링 과정

1. 초기 화면 렌더링이 이루어지면, Virtual DOM 은 초기 UI 상태를 표현하는 가상 트리를 생성해 메모리에 저장한다.

2. 컴포넌트의 변화가 감지되면, React 는 변경된 상태를 반영하는 새로운 Virtual DOM 을 생성한다.

3. React 는 변화 이전의 Virtual DOM 과, 변화 이후의 Virtual DOM 을 비교하는 Diffing 알고리즘을 적용하고, 효율적으로 변경된 부분만을 식별한다.

4. React 는 Diffing 결과에 따라 변경된 부분만을 실제 DOM 에 적용하는 Reconciliation 과정을 거친다. 이때, 변화 부분만을 리렌더링하는 최소한의 DOM 조작이 이루어지기 때문에, 전체적인 성능 향상이 이루어진다.

5. 사용자에게 최신의 UI 가 표시된다.