22.11.07 : DOM (Virtual DOM vs Real DOM)

DOM: 문서 객체 모델 Docomunet Object Model

 

XML이나 HTML에 접근하기 위한 일종의 인터페이스이며, 문서 내 모든 요소에 대해 nodes와 objects로 표현하고, 접근하는 방법을 제공한다. 웹 페이지의 객체 지향 표현이며, 자바스크립트 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.
이 DOM은 트리구조로 되어있어서 이해하기 쉽단 장점이 있지만, 이런 구조 때문에 부분적 수정이 필요할 때 DOM 전체가 바뀌어야하기 때문에 DOM트리에서는 속도 이슈가 발생하였고, 지속적인 DOM 업데이트는 잦은 오류, 사용자 인터페이스에 악영향을 끼쳤다. 

 

이러한 단점을 해결하기 위해 나온것이 바로 가상돔(Virtual DOM)이다.

 

https://youtu.be/BYbgopx44vo

Virtual DOM의 탄생. (출처 PurelyFunctional tv - React  and the Virtual DOM)

Virtual DOM 은 무엇일까?

 

 

Virtual DOM은 실제 DOM 문서를 추상화한 개념으로, 변화가 많은 View를 실제 DOM에서 직접 처리하지 않고, Virtual DOM과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화 하는 프로그래밍 개념이다. 이것은 실제 DOM보다 가볍고, 빠른 Rendering이 가능 하여 압도적으로 DOM의 부담을 줄여준다. React 뿐만 아니라 Vue 또한 이러한 Virtual DOM 방식을 채택하였다. 

 

 

Reference

https://noogoonaa.tistory.com/53

돔(DOM)과 가상돔(Virtual DOM)에 대해서 알아봅시다.