개발하는데 다 이유가 있겠지

`Virtual DOM(Document Object Model)`은 실제 DOM을 JavaScript 객체로 메모리 상에 복제한 가상 DOM입니다. 실제 DOM 조작은 브라우저의 `리플로우`와 `리페인트` 과정을 거치기 때문에 비용이 많이 드는 작업입니다.

 

React와 같은 프레임워크는 이 Virtual DOM을 활용하여 UI를 효율적으로 관리합니다. Virtual DOM은 실제 DOM 요소의 가벼운 복사본으로, 상태 변경 시 전체 UI를 Virtual DOM에 먼저 렌더링합니다.

 

컴포넌트의 `상태(State)`가 변경될 때마다 새로운 Virtual DOM을 생성하고, 이전 Virtual DOM과 `비교(Reconciliation)`하여 변경된 부분만 실제 DOM에 한 번에 `반영(Batch Update)`합니다.

 

이 과정에서 `DOM diffing알고리즘`을 사용하여 최소한의 DOM 조작으로 UI를 업데이트 하므로, 불필요한 리렌더링을 방지하고 성능을 향상시킵니다.

 

즉, Virtual DOM은 실제 DOM 조작을 최소화하여 빠르고 효율적인 UI 업데이트를 가능하게 하는 핵심적인 기술입니다. 다만, 간단한 UI의 경우 오히려 Virtual DOM이 오버헤드가 될 수 있으며, 추가적인 메모리 사용이 필요하다는 특징이 있습니다.

---

2024.11.14 - [프론트엔드] - [프론트엔드] reflow, repaint