Virtual DOM

DOM

: Document Object Model

전체 문서의 UI를 트리의 구조로 표현 >> DOM tree

하지만, 특정 요소(Element)를 변경하고자 할 때
리플로우(Reflow)와 리페인트(Repaint)비용이 많이 발생하게 됨 😥

Reflow

요소의 크기나 위치를 변경 시 브라우저는 새로운 레이아웃을 계산한 뒤 화면을 다시 불러옴

Repaint

요소의 색상이나 테두리 등 외형 변경 시 브라우저는 해당 요소를 다시 불러옴

Virtual DOM

DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어
실제 DOM을 조작하는 작업이 무겁기 때문이다.

그래서 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해
내부적으로 가상 DOM을 만들어서 관리한다.

Virtual DOM은 DOM의 요약본

빨간 부분에 수정사항이 생기게 되면 Virtual DOM은 달라진 값을 탐지하여 변경하고 최종적인 결과물을 실제 DOM에 전달한다.

만약 Virtual DOM이 없다면
DOM은 모든 동그라미들을 빨간색으로 바꿔서 렌더링했을 것이다.

사소한 변경사항에도 전체가 리렌더링되기 때문에 브라우저에 과부하가 올 수 있기 때문에 Virtual DOM의 역할은 중요하다.

Reference

https://www.javatpoint.com/what-is-dom-in-react
https://codingmedic.wordpress.com/2020/11/10/the-virtual-dom/