가상 DOM

Source: Dev.to

Virtual DOM이란?

Virtual DOM (VDOM)은 실제 DOM의 가벼운 메모리 내 표현입니다.
실제 DOM 트리의 디지털 복사본처럼 동작하여, 실제 DOM을 업데이트하기 전에 이전 버전과 비교할 수 있게 합니다.

• Virtual – 물리적으로 존재하지 않고 디지털 형태로 존재하지만 실제 객체를 흉내 내는 것.
• DOM (Document Object Model) – HTML 문서를 객체 트리로 표현하는 프로그래밍 인터페이스.

VDOM은 이 가벼운 복사본에서 변경 사항을 효율적으로 추적하고, 실제 DOM에 필요한 최소한의 업데이트 집합을 결정합니다.

Virtual DOM이 존재하는 이유

실제 DOM을 직접 업데이트하면 페이지의 큰 부분을 다시 렌더링해야 할 때가 많아 느릴 수 있습니다. (예: 단어 하나만 바꾸는 경우에도) Virtual DOM은 다음을 통해 이를 해결합니다:

• 불필요한 업데이트 감소 – 실제로 변경된 UI 부분만 수정합니다.
• 성능 향상 – DOM 작업이 적어져 웹 애플리케이션이 더 빠르고 부드러워집니다.
• 예측 가능한 업데이트 사이클 제공 – 변경 사항이 배치되어 최적화된 방식으로 적용됩니다.

현실 세계 비유

• Real DOM → 시험지에 바로 쓰는 것 (변경할 때마다 전체 페이지를 다시 써야 함).
• Virtual DOM → 초안을 작성한 뒤, 필요한 부분만 최종 시험지에 복사하는 것.

React에서 Virtual DOM이 작동하는 방식

컴포넌트의 상태가 변할 때 (예: Increment 또는 Decrement 버튼을 클릭), React는:

1. useState를 사용해 컴포넌트의 상태를 업데이트합니다.
2. 메모리 내에 UI의 새로운 가상 표현을 생성합니다.
3. 이 새로운 VDOM 트리를 이전 트리와 비교합니다 (reconciliation 과정).
4. 필요한 최소 변경 집합을 결정합니다.
5. 그 변경 사항만 실제 DOM에 적용합니다.

이와 같은 선택적 업데이트 덕분에 앱은 빠르고 부드럽게 동작합니다. UI의 필요한 부분(예: 카운트 텍스트)만 다시 렌더링되고 전체 페이지는 다시 그리지 않기 때문입니다.

---

핵심 요점: Virtual DOM을 조작하는 것이 직접 Real DOM을 조작하는 것보다 작업량을 최소화하고 성능을 높이며 사용자 경험을 부드럽게 만들기 때문에 선호됩니다.