DOM (Document Object Model)은 HTML 문서 구조를 객체로 표현한 것 이다.
그럼 '문서 구조'는 무엇일까? HTML 문서에는 <body>, <p> 등 여러 태그가 문서의 구조를 이루고 있다. 이런 여러 HTML 요소의 계층을 반영해서 만든 객체가 DOM이다. HTML 문서를 객체로 표현하면 JavaScript와 같은 스크립트 및 프로그래밍 언어가 웹페이지에 접근할 수 있다. 즉, DOM은 HTML로 구성된 웹 페이지와 스크립트 및 프로그래밍 언어를 연결시켜주는 역할을 한다.
React에서는 가상 돔을 사용한다. 가상 돔이란, 실제 DOM(Document Object Model)을 조작하는 방식이 아닌, 실제 DOM을 모방한 가상의 DOM을 구성해 원래 DOM과 비교하여 달라진 부분을 리렌더링 하는 방식으로 작동한다. 그래서 사실 DOM이라기 보다는 어떤 부분이 달라졌는지 확인하는 디핑 알고리즘(diffing algorithm)라 봐야한다.
즉, 가상 돔을 잘 이해해야만 리액트의 상태(state)에 대해 잘 이해하고 다룰 수 있다.
왜 리액트는 실제 DOM을 조작하지 않고, 가상 돔을 사용하는 것일까? 자바스크립트의 모던한 방식(Vanilla Javascript)의 DOM을 조작하는 방식은 무거운 작동방식이다. 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있기 때문이다. 그래서 리액트는 깜빡거림 없이 부드러운 UX를 사용자에게 제공하고자 변경사항만 빠르게 파악하고 리렌더링 하기 위해 DOM을 만들어 비교하는 방식을 채택하였다.
리액트는 성능 향상을 위해 실제 렌더링된 UI를 내부적으로 자바스크립트 객체로 따로 관리한다. 직접 DOM 노드를 생성하거나 접근해서 변경을 하는 것이 자바스크립트 객체로 표현된 DOM 트리를 조작하는 것보다 훨씬 느리기 때문이다.
(자바스크립트 객체를 따로 관리하면서 생기는 메모리 사용량 증가의 단점이 존재한다.)
*Virtual DOM은 **실제 DOM 트리의 가벼운 사본(lightweight copy)**으로, 메모리 상의 자바스크립트 노드 트리