가상돔이란?

우선 가상돔을 쓰는 이유가 무엇일까?

우리가 화면을 렌더링 즉 브라우저 렌더링을 할 때 가장 비용이 많이 드는 단계가 레이아웃 단계와 페인트 단계입니다.
그러므로 이 과정을 최소화를 시키는 것이 최적화에 매우 중요한 일입니다.

만약 js을 이용해 dom을 직접적으로 조작한다면 매번 변경될 때마다 레이아웃과 페인트작업을 새로 해줘야해서 비용이 크게 듭니다

이런상황을 해결하기위해 가상DOM이 나오게됩니다

가상 돔은 실제로 렌더링 되지는 않았지만 실제 돔구조를 반영한 상태로 메모리에 있는 가상의 돔입니다.

가상돔은

1. 메모리상에 존재
2. 실제화면에 그릴 필요가 없어 실제 돔보다 연산비용이 적음

이러한 특성을 바탕으로 가상돔은 변경사항들을 한번에 묶어 실제 돔에 반영을 합니다

즉 예시로 만약 리액트를 이용해서 virtual dom의 어떤 노드를 수정한다면
리액트는 새로운 virtual dom(updated virtual dom)을 만들고 이전 virtual dom 트리와 비교한다.
만약 일치하지 않는 노드를 발견한다면 리액트는 실제 dom 트리에서 해당 노드만 업데이트 시켜준다.

이러한 React의 특성으로 인해 매번 수정할 때마다 렌더링이 일어나지 않고 다른 부분만 변경할 수 있게 도와주는 것입니다.

참고자료(https://yozm.wishket.com/magazine/detail/1338/)