Virtual DOM(Document Object Model)

Virtual DOM

DOM(Document Object Model)을 추사화한 가상의 객체이다. DOM은 문서 객체 모델로 브라우저에서 다루는 HTML 문서를 파싱하여 문서의 구성요소들을 객체로 구조화하여 나타낸 것이다.

 

DOM은 HTML Elements, Attributes, CSS styles, Events, Methods 등을 제어할 수 있는 표준 인터페이스를 제공한다. "웹 페이지를 구성하는 요소를 구조화해서 나타낸 객체고 이 객체를 이용해서 웹 페이지 구성요소를 제어할 수 있다"라고 이해하면 된다.

 

Virtual DOMDMS DOM 조작에 의한 렌더링이 비효율적인 문제, SPA(Single Page Application)특징으로 DOM 복잡도 증가에 따른 최적화 및 유지 보수가 더 어려워지는 문제를 해결하기 위해 나타났다. 결론적으로 DOM을 반복적으로 직접 조작하면 그 만큼 브라우저가 렌더링을 자주하게 되고, 그 만큼 PC 자원을 많이 소모하게되는 문제를 해결하기 위한 기술이다.

출처 : 유튜브 큰돌의터전

기존에는 바꿀 때마다 렌더트리 생성하는 것이 좋지 못했기에 해결하기 위해 Virtual DOM이 나왔다. 가상으로 UI를 저장했다가 실제 DOM과 연동하는 프로그래밍 혹은 Javascript 객체를 말한다. 이를 이용하여 수많은 요소가 수정이 되어도 딱 한 번 수정 변화가 일어난 요소만 새로 렌더링한다.

 

* 참고한 글

https://youtu.be/kP-H1GXD_nI

https://jeong-pro.tistory.com/210

Virtual DOM 동작 원리와 이해 (with 브라우저의 렌더링 과정)