Virtual DOM

DOM은 문서 객체 모델이라고 하는데 결국은 브라우저에서 다룰 HTML 문서를 파싱하여 "문서의 구성 요소들을 객체로 구조화하여 나타낸 것"이다.

 

DOM은 HTML Elements, Attributes, CSS style, Events, Methods 등을 제어할 수 있는 표준 인터페이스를 제공한다.

 

요약하면 웹 페이지를 구성하는 요소를 구조화해서 나타낸 객체이며 이 객체를 이용해서 웹 페이지 구성 요소를 제어할 수 있다.

 

Virtual DOM

Virtual DOM은 DOM을 추상화하였고, 가상의 객체라 표현한다.

 

어떤 문제를 해결하기 위한 기술인가?

• DOM 조작에 의한 렌더링이 비효율적인 문제
• SPA(Single Page Application) 특징으로 DOM 복잡도 증가에 따른 최적화 및 유지 보수가 더 어려워지는 문제

결론적으로 DOM을 반복적으로 직접 조작하면 그 만큼 브라우저가 렌더링을 자주하게 되고, 그 만큼 PC 자원을 많이 소모하게 되는 문제를 해결하기 위한 기술이다.

 

동작 원리

Virtual DOM이라는 DOM을 추상화한 가상의 객체를 메모리에 만들어 놓는 것이다.

Virtual DOM은 DOM과 유사한 역할을 담당할 객체이다.

 

즉, 변경 사항을 DOM에 직접 수정하는 게 아니라 중간 단계로 Virtual DOM을 수정하고 Virtual DOM을 통해서 DOM을 수정하게 했다.

 

실질적인 방법은 Virtual DOM에 변경 내역을 한 번에 모으고(버퍼링) 실제 DOM과 변경된 Virual DOM의 차이를 판단한 후, 구성 요소의 변경이 부분만 찾아 변경하고 그에 따른 렌더링을 한 번만 하는 것으로 해결한다.

 

추상화했다는 얘기는 DOM을 제어하는 API를 직접 호출하지 않고 Virtual DOM을 제어하는 것을 React나 Vue같은 프레임워크가 알아서 하도록 추상화했다는 얘기가 더 정확하다.

 

실질적인 DOM 관리를 Virtual DOM이 하게 된다.

 

주의 사항과 한계

• 0.1초마다 화면에 데이터가 변경된다면? Virtual DOM으로 0.5초씩 모아가지고 렌더링을 적게할 수 있을까?

=> 안된다. 동시에 변경되는 것에 한해서만 렌더링 된다.

 

• React나 Vue 등을 이용해서 Virtual DOM을 쓰면 무조건 빠른가?

=> 아니다. 똑같이 최적화를 해야 한다. ( 슬라이드를 옮기거나 무한 스크롤 등의 움직임이 있을 때는 Virtual DOM을 이용해서 반복 렌더링을 하지 않도록 해줘야 한다.

 

• Virtual DOM은 메모리에 존재한다. DOM에 준하는 무거운 객체(Virtual DOM)가 메모리에 상주하고 있기 때문에 메모리의 사용이 많이 늘어날 수 밖에 없다.
• Virtual DOM을 조작하는 것도 엄청나게 많은 컴포넌트를 조작하게 된다면 오버헤드가 생기게 마련이다. Virtual DOM 제어가 DOM 직접 제어에 비해 상대적으로 비용이 적게 들 뿐이다.