React와 Vue를 써 보신 분이라면 분명 들어봤을 용어이다.

DOM?

우선 virtual dom 을 살펴보기 전에 dom을 알고 가자!
DOM은 Documented Object Model로 HTML이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고, 이벤트에 반응하며 값을 입력받는 등 기능들을 수행할 객체들로 실체화된 형태를 의미합니다.

Virtual Dom?

일반적으로 중요 렌더링 경로는 초당 60회 정도의 주기로 계산을 수행합니다. 이때 가장 비용이 많이 드는 단계가 바로 레이아웃 단계와 페인트 단계입니다. 때문에 성능 최적화를 위해서는 두 단계에서의 연산을 최소화하는 것이 중요 합니다.
javaScript을 이용해 dom을 직접 조작하면, 변경 사항이 있을 때마다 잠재적인 레이아웃 단계와 페인트 단계를 초래하게 됩니다. 만약 10개의 dom노드를 for문으로 일일이 수정하게 되면, 하나의 노드에 수정 사항이 생길 때마다 화면을 다시 그리는 과정을 거쳐야 할 수 있습니다. 즉 10개를 한 번에 수정하는 것이 아니라, 하나씩 수정된 노드가 10번에 걸쳐서 다시 화면에 그려질 수 있다는 이야기입니다. 때문에 일반적으로 dom을 직접 조작하는 것은 비용이 크다고 이야기합니다. 반면에 가상 dom 은 실제로 렌더링 되지는 않았지만, 실제 dom구조를 반영한 상태로 메모리에 있는 가상의 dom입니다. 메모리 상에 있고, 실제 화면에 그려야 할 필요는 없기 때문에 실제 dom보다는 연산 비용이 적습니다. 가상 dom은 이러한 특징을 바탕으로 위에서 말한 변경 사항들을 한 번에 묶어서 실제 dom에 반영을 합니다.물론 레이아웃 단계와 페인트 단계에서 한 번에 변경되어야 하는 사항은 많아집니다. 대신 단 한번의 계산만으로도 바뀐 dom을 적용할 수 있기 때문에 연산의 횟수는 최소한이 됩니다. 이러한 가상 dom을 사용하는 대표적인 라이브러리 프레임워크가 바로 react와 vue 입니다.