가상돔이란?

가상돔

기존 DOM의 추상화적인 개념으로 변경사항이 존재하는 경우, 가상돔에서 먼저 처리후에 기존 DOM과 비교하여 변경사항을 동기화하도록 돕는다.

가상돔 왜 필요한가?

보다 효율적이면서도 빠른 브라우저 렌더링을 위해서이다. 브라우저 리렌더링 과정에서는 Reflow, Repaint 에 의해 DOM을 재구축하게 된다. 루트 노드 부터 새롭게 구축하는 것이기 때문에, 변경되지 않은 노드까지 다시 만들기를 반복한다.

• Reflow(ReLayout) - DOM의 추가/삭제, 기하학적(높이/넓이/위치) 변화 시 발생
  margin, padding, width, height
• Repaint - 기하학적 변화가 없는 CSS 속성의 변경
  color, background, transform

이러한 문제를 해결하기 위해, DOM 의 변화를 인지하기 위한 가상 돔을 먼저 구축한 후, 기존의 DOM과 비교하여 달라진 노드만 구축하도록 도와주는 것이다.