# Virtual DOM

## 1. Virtual DOM 이란?

* 가상의 DOM, 실제 DOM의 **사본** 같은 개념
* React는 실제 DOM 객체에 접근해 조작하는 대신, 가상 DOM 객체에 접근해 **변화 전과 후를 비교해 바뀐 부분만 적용**
* 즉, Javascript 객체로 이루어진 가상 DOM 트리를 사용해, **실제 DOM 조작을 최소화하고 성능을 최적화하는 기술**

<br>

## 2. Virtual DOM의 형태

* 실제 DOM과 마찬가지로 **가상 DOM 또한 HTML 문서 객체 기반**
* 추상화만 되었을 뿐 평범한 자바스크립트 객체
* 따라서 실제 DOM을 건드리지 않고도 필요한 만큼 자유롭게 조작 가능
* 리액트에서 **컴포넌트의 상태나 속성이 변경될 때마다** 새로 생성
* 리액트는 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분만 실제 DOM에 반영

<br>

## 3. Virtual DOM의 동작 과정

* 비교 과정에서 React는 **Diffing 알고리즘을 사용**하여 변경된 부분을 감지
* Diffing 알고리즘에서 이를 감지할 수 있도록 직접 할당이 아닌 **setState와 같은 method를 활용**해 상태를 변경
* 가상 DOM과 변경된 새로운 가상 DOM을 비교하여 변경이 필요한 부분만 실제 DOM에 반영하여 업데이트 → 재조정 (Reconciliation)
* 여러 개의 상태 변화가 있을 경우 일괄적으로 한 번에 업데이트(Batch Update)
* 이를 통해 성능을 최적화하고 불필요한 리렌더링을 최소화함.

<br>

## 4. Virtual DOM은 빠르다?

* 가상 DOM은 일반적으로 실제 DOM을 직접 조작하는 것보다 빠르지만, 모든 경우에 그렇지는 않음.
* 때로는 직접 DOM을 조작하는 것이 더 빠를 수 있음.
