Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다.
먼저 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거칩니다. DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정역시 20회 다시 이루어 집니다. ⇒리플로우.
작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하됩니다.
Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다.
따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 됩니다.
리액트는 브라우저에 렌더링하기 위해 가상 돔을 사용
기존에는 DOM의 변화를 일일히 감지해서 렌더링을 해줬는데 하나하나 계산해서 렌더링하면 비용이 컸다.
리액트는 이러한 과정을 한꺼번에 적용해서 렌더링하여 최적화하였다.