버츄얼 돔과 리얼 돔

요약

Q 버츄얼 돔과 리얼 돔의 차이를 설명해주세요!

A

리얼 돔은 실제 페이지를 이루는 컴포넌트인 엘리먼트를 tree 형태로 표현한 것이다.
버츄얼 돔은 리얼 돔의 복사본이다. dom은 해당 노드에 접근 및 제어가 가능하며 버츄얼 돔은 리얼 돔을 조작하는 것보다 더 빠르게 조작이 가능하다. 또한 버츄얼 돔은 batch로 update 한다.

버츄얼 돔과 리얼 돔

Dom이란 document Object Model로, 페이지를 이루는 컴포넌트인 엘리먼트를 tree 형태로 표현한 것이다.
트리의 요소를 노드라고 부르며 각각의 노드는 해당 노드에 접근과 제어를 할 수 있는 api를 제공한다.

예시로는 document.getElementById("demo").innerHTML = "Hello World!";를 들 수 있다.

가상돔이란 실제 dom과 구조가 완벽히 동일한 복사본의 형태로 이를 이용하여 실제 dom을 변경할 수 있다. 실제 dom은 아니지만 객체 형태로 메모리에 저장되기 때문에 훨씬 더 빠르게 조작이 가능하다.또한 가상 돔은 변경사항을 모두 모아 한번에 반영하는 batch 방법으로 update한다.