소주제

Virtual DOM, DOM

노트

• DOM : Document Object Model : HTML 또는 XML document와 상호작용하고 표현하는 API다. DOM은 브라우저에서 로드되며, 노드트리(각 노드는 document의 부분을 나타낸다.)로 표현하는 document 모델이다.
• Virtual DOM : UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념이다.

단문 요약

<aside> 📌 Virtual DOM은 Real DOM을 조작할 때 변화가 필요하지 않은 부분까지 리렌더링 되는 성능 저하를 막기 위해 등장했다. 즉, Virtual DOM은 실제 DOM 조작을 최소화하고 성능을 최적화하는 기술이다.

Virtual DOM은 리액트에서 컴포넌트의 상태나 속성이 변경될 때마다 새로 생성되며, 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분만 실제 DOM에 반영한다.

비교과정에서는 Diffing 알고리즘이 사용되며, Diffing 알고리즘에서 변경된 상태를 감지할 수 있도록 직접할당이 아닌 setState와 같은 매서드를 활용해 상태를 변경한다.

여러개의 상태변화가 있는 경우에는 일괄적으로 한번에 업데이트(Batch Update)함으로써 성능을 최적화하고 불필요한 리렌더링을 최소화할 수 있다.

가상 DOM이 실제 DOM 을 조작하는 것보다 일반적으로 빠르지만, 모든 경우에 그렇지는 않다. 실제 DOM 조작이 느려지는 대부분의 경우는 조작이 발생할 때마다 브라우저에서 다시 레이아웃을 계산하고, 페이지를 다시그리는 렌더링 과정의 비용이 크기 때문이다. 따라서 실제 DOM 조작을 최소화하는 것이 성능 최적화의 핵심이다.

</aside>

Reference

DOM - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

Virtual DOM과 Internals – React

DOM과 Virtual Dom이란?

유어클래스 | 코드스테이츠 학습 플랫폼 UrClass