Virtual DOM



DOM이란?

“DOM은 HTML, XML document와 상호작용하고 표현하는 API이다. DOM은 browser에서 로드되며, Node(이하 노드) 트리(각 노드는 document의 부분을 나타낸다)로 표현하는 document 모델이다.(ex. element, 문자열, 혹은 코멘트)”

Virtual Dom?

위의 그림처럼, 가상 DOM은 DOM이 생성되기 전, 이전 상태 값과 수정사항을 비교하여 달라진 부분만 DOM에게 한 번에 전달하여 딱 한 번만 렌더링을 진행한다.

등장의 배경은 DOM 조작에 의한 렌더링이 비효율적이고 SPA(Single Page Application) 특징으로 DOM 복잡도 증가에 따른 최적화 및 유지 보슈가 어려워지는 문제 때문에 DOM을 반복적으로 직접 조작하면 그만큼 브라우저가 렌더링을 자주하게 되고, 그만큼 PC의 자원을 많이 소모하는 문제를 해결하기 위한 기술.
DOM의 메서드를 통해 DOM을 바꾸게 되면 그것을 인지한 브라우저 엔진은 렌더링을 다시 진행

“직접 DOM에 접근하는 것은 지양해야 한다.”
이는 DOM에 직접 접근해도 문제가 되진 않지만, DOM이 직접 변경된다면 사소한 변경사항에도 전체가 재렌더링 되기 때문에 브라우저에 과부하가 올 수 있다. 따라서 최대한 DOM에 직접 접근하지 말아야 한다, 라고 이해하면 될 것 같다.

주의사항

렌더링은 동시에 변경되는 사항에 대해서만 가능하며, 최적화의 문제가 존재합니다. virtual DOM은 메모리에 상주하기 때문에 메모리 사용량이 증가하며 virtual DOM을 조작하는 것도 많은 컴포넌트를 조작하게 된다면 오버헤드가 발생합니다.