Virtual DOM이란?

- DOM(Document Object Model) : 하나하나의 Element(HTML)들을 담고 있는 웹페이지를 Document라고 하는데, 이를 브라우저가 분석해 페이지를 띄워주는 방식이다.

 

- Virtual DOM이란 React에서 사용하는 가상 DOM으로 실제 DOM 기반으로 만들어지며 실제 DOM이 아닌 JS 객체 형태로 메모리 안에 저장되어 있다.

- 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업은 무겁기 때문에, React는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 DOM을 만들어서 관리한다.

- 예를 들어, document.querySelector("#title").style.color = "red"와 같이 실제 DOM 조작을 하는 경우, 브라우저는 HTML을 탐색해 해당 Element를 찾고 해당 Element와 자식 Element를 DOM에서 제거하고 새롭게 수정된 Element로 이를 교체한다.

 

* React가 가상 DOM을 사용하는 방식

- React는 항상 두개의 가상DOM 객체를 가지고 있다.

1. 렌더링 이전 화면 구조를 나타내는 가상DOM

2. 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상DOM

 

- React는 Re-Rendering이 발생할 때마다 새로운 내용이 담긴 가상DOM을 생성한다.

- 렌더링 이전에 화면의 내용을 담고있는 첫번째 가상DOM과 업데이트 이후에 발생할 두번째 가상 DOM을 비교해 정확히 어떤 Element가 변했는지를 비교(Diffing은 효율적인 알고리즘 사용해서 진행된다)한다.

- React는 이를 통해 차이가 발생한 부분만을 실제 DOM에 적용한다.

- 이 과정을 Reconciliation(재조정)이라고 한다.

---

* 정리

- Virtual DOM이란, Reactdㅔ서 사용하는 가상 DOM으로 실제 DOM 기반으로 만들어지며 실제 DOM이 아닌 JS 객체 형태로 메모리에 저장되어 있다.

- React가 Virtual DOM을 사용하는 이유는 실제 DOM을 조작하는 작업은 무겁기 때문에, 변경사항을 빠르게 파악하고 반영하기 위해 React는 가상 DOM을 만들어서 관리한다.

- React는 항상 두개의 가상 DOM 객체(렌더링 이전의 화면 구조를 나타내는 가상 DOM과 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상 DOM)가지고 있다.

- 만약 Re-Rendering이 발생하면, 새로운 내용이 담긴 가상 DOM을 생성하고 이전 가상 DOM과 비교하여 정확히 어떤 Element가 변했는지를 비교하고 차이가 발생한 부분만을 실제 DOM에 적용한다.

- 이 과정을 Reconciliation(재조정)이라고 한다.

---

학습 단계로 잘못된 정보가 있을 수 있습니다. 잘못된 부분에 대해 알려주시면 정정하도록 하겠습니다.

참고 : https://callmedevmomo.medium.com/virtual-dom-react-%ED%95%B5%EC%8B%AC%EC%A0%95%EB%A6%AC-bfbfcecc4fbbhttps://mangkyu.tistory.com/102