# Understanding Virtual DOM

## DOM vs Virtual DOM

ReactDOM의 [render()](https://ko.reactjs.org/docs/react-dom.html#render) 메서드는 가상 DOM을 실제 DOM에 마운트 시켜, 렌더링 하는 역할을 수행합니다.

```jsx
// vNode   → 가상 DOM Tree (React 요소로 구성)
// domNode → 실제(actual) DOM 노드
ReactDOM.render(vNode, domNode)
```

{% hint style="info" %}

#### ReactDOM.render 동작 방식

domNode의 콘텐츠를 제어합니다. 처음 호출할 때 기존의 DOM 요소를 교체하며, 이후 호출에서는 React의 DOM 비교(diffing) 알고리즘을 사용하여 보다 효과적으로 업데이트 합니다.
{% endhint %}

{% hint style="warning" %}

#### 가상 DOM을 사용하는 이유?

UI는 사용자의 요구사항에 따라 수시로 업데이트됩니다. 업데이트 과정에서 실제 DOM이 변경 되면 업데이트 된 요소와 그 자식 요소를 다시 렌더링 해야 하는데, 이러한 일련의 과정이 UI 속도를 느리게 만듭니다. UI 컴포넌트 개수가 많을 수록 렌더링 비용은 더욱 많이 들어 속도가 현저히 느려집니다.
{% endhint %}

가상 DOM은 실제 DOM에 직접적으로 조작하는 것이 아니라, 이전/이후 상태를 비교하여 변경 사항이 발생할 때 변경된 부분만 실제 DOM에 업데이트하므로 UI 속도를 크게 향상시킬 수 있습니다.

![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MUveaU9LH-1tihGNkjT%2F-MUvhkAwxlqcFwaXjXSS%2Fimage.png?alt=media\&token=ebfd6eb7-e0e4-4362-8bb3-8badfc3a6204)

{% hint style="info" %}

#### 가상 DOM 동작 방식

React는 인 메모리 데이터 구조 캐시를 만들고, 전/후 결과를 비교하여 차이를 계산한 다음 브라우저에 표시하는 DOM을 효과적으로 업데이트 합니다. ([참고](https://ko.reactjs.org/docs/refs-and-the-dom.html))

이를 통해 개발자는 마치 모든 페이지가 변경될 때마다 렌더링 되는 것처럼 코드를 작성할 수 있는데, 실제로 React는 실제 변경되는 하위 컴포넌트만 다시 렌더링 할 뿐입니다.
{% endhint %}

* 잦은 DOM 조작은 비용이 많이 들고 속도가 느려집니다.
* React는 가상 DOM을 사용하여 성능(속도)을 향상시키는 방식을 채택했습니다.
* 가상 DOM의 컴포넌트를 지속적으로 관찰하여 상태 변경을 감지하려 시도합니다.
* 가상 DOM의 이전, 이후 비교는 diff 알고리즘을 사용하여 효율적으로 처리합니다.
* 비교 결과 차이가 발생하면 실제 DOM에 반영해 UI를 업데이트 합니다.

![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MUveaU9LH-1tihGNkjT%2F-MUviuRMwdIEzr3v3JOt%2Fimage.png?alt=media\&token=80f635ca-365b-4de6-bc4d-0faa0a429c6a)

## Youtube Playlist

[Virtual DOM](https://www.youtube.com/playlist?list=PLAl17zBU4FvgHYTohaYLo_DCaCfScpwZS) 재생목록 영상 강의는 가상 DOM의 각 모듈 작동 방식에 대해 안내합니다.

{% embed url="<https://www.youtube.com/playlist?list=PLAl17zBU4FvgHYTohaYLo_DCaCfScpwZS>" %}

1. **환경설정 ←**
2. 실제 DOM model 컨트롤
3. DOM model 컨트롤
4. 가상 DOM 가상 트리 비교 후, 패치
5. 가상 DOM 배열 데이터 순환 처리
6. 가상 DOM 제거버튼
7. 가상 DOM 추가버튼