DOM이란?
DOM(Document Object Model, 문서 객체 모델)은 HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 API(프로퍼티/메서드)를 제공하는 트리 자료구조
Virtual DOM이란?
애플리케이션의 UI를 구성하는 HTMLElement를 메모리 내에서 구현한 가상의 DOM. 실제 DOM을 조작하는 것이 아니라 Virtual DOM에 렌더링 한 후, Virtual DOM과 실제 DOM을 비교하여 변경된 부분만 반영시켜 업데이트 한다. (불필요한 렌더링 횟수↓)
DOM vs. Virtual DOM
DOM에 변화가 생기면 render tree(DOM tree + CSSOM tree)의 reflow+repainting 과정이 반복되는데 복잡한 SPA의 경우 DOM 조작이 많이 발생한다. 잦은 변화를 모두 DOM에 반영하면 많은 연산이 필요하고 전페 프로세스를 비효율적으로 만들 것이다.
Virtual DOM은 실제 DOM에 적용하기 전에 변경사항을 적용했다가 최종 결과만 실제 DOM에 반영하기 때문에 브라우저 내에서 발생하는 연산의 양을 줄여준다.
React에서 Virtual DOM을 사용하는 이유
리액트는 빠르지 않다.
Virtual DOM을 사용하면 데이터를 한번 더 조작한다는 것이기 때문에 DOM을 직접적으로 조작하는 것보다 느리다.
그러나, 대부분의 상황에서 사용하는데 무리가 없을 정도로 '충분히' 빠르고, 빈번하게 발생하는 DOM 렌더링을 효율적으로 만들어주기 때문에 유지보수할 수 있는 애플리케이션을 만드는데 효과적이다.
참조
모던 자바스크립트 Deep Dive (저자: 이웅모)
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://ui.toast.com/weekly-pick/ko_20210819
https://velog.io/@woohm402/virtual-dom-and-react
https://velopert.com/3236
