가상 돔 (Virtual Dom)

📙 DOM 이란?

DOM(Document Object Model)이란 브라우저에서 다룰 HTML 문서를 파싱하여 문서의 구성요소들을 객체로 트리 형태로 구조화하여 나타낸 것이다.

즉, HTML 태그들을 자바스크립트 내에서 제어할 수 있게 만든 HTML 모음 객체이다.

자바스크립트에서는 Document라는 전역 객체를 통해 HTML 태그을 접근하여 사용할 수 있다.

📘 가상 돔 (Virtual DOM)

가상 돔이란 React에서 사용하는 DOM을 자바스크립트의 객체 형태로 추상화한 Model 이다.

쉽게 DOM의 사본을 React에서 추가로 관리하고 있다고 생각하면 된다.

가상돔이 하는 일은 다음과 같다.

• DOM의 상태를 메모리에 저장하고, DOM의 변경 전과 변경 후의 상태 비교한 뒤 변경된 내용만 반영

• 가상 돔은 DOM의 상태를 메모리 위에 계속 올려놓고 DOM의 변경이 있는 경우에만 해당 변경사항 반영

가상 돔이 필요한 이유

요즘 대규모의 서비스를 제공하는 웹사이트들은 많은 데이터 및 요소들을 담고 있다.

이러한 대규모의 요소들이 DOM에 직접 접근하여 변화를 주면 성능 이슈가 발생한다고 알려져 있다.

하지만 실제로 DOM의 성능 자체는 자바스크립트가 일반 객체를 처리할 때의 성능과 비교하여 큰 차이가 없다고 한다

그러면 왜 가상 돔을 만들어 사용하는 것일까?

DOM의 업데이트 자체는 성능상의 이슈가 거의 없지만, DOM 업데이트 이후 CSS를 다시 계산하고 DOM 트리가 수정되며 Render Tree가 실시간으로 갱신된다. 즉 화면에서 10개의 수정사항이 발생하면 10번의 CSS 계산 및 Render Tree가 갱신된다는 것이다. 이 과정에서 많은 성능상이 문제가 발생하여 가상 돔을 활용한다.

🔎 React가 가상 돔을 활용하는 방법

1. 데이터가 업데이트 되면, 전체 UI를 가상 돔에 리렌더링한다.

2. 이전 가상 돔에 있던 내용과 현재 가상 돔의 내용을 비교한다.

3. 바뀐 부분에 대해 DOM에 적용한다.

이 과정을 통해 실제 DOM은 한 번만 업데이트가 이루어져 레이아웃 계산을 한 번만 실행한다.