실제 DOM과 같은 내용을 담은 복사본으로 실제 DOM이 아닌 객체 형태로 메모리상에 저장되어 있습니다.
리액트는 가상 돔을 이용해서 실제 DOM의 조작을 빠르게 처리합니다.
Virtual DOM 실제 DOM과 다르게 브라우저의 element을 제어하는 API를 제공하지 않습니다.
웹 페이지들에 들어간 elements을 tree 형태로 표현한 것
DOM tree 안에는 각각의 element가 사용하는 노드가 들어있습니다.
브라우저가 웹 페이지를 탐색하여 해당되는 element를 찾고, 해당 element와 하위 element들을 DOM에서 제거 시킵니다.
이후 새롭게 대체된 element로 대체하고, CSS을 다시 계산하고 레이아웃 정보를 알맞게 수정하고 새롭게 계산된 내용을 브라우저 화면에 그려줍니다.
매번 DOM를 조작할 때 마다 브라우저 화면의 UI를 새롭게 그려주는 작업은 복잡하고 시간이 걸리는 작업입니다.
리액트는 항상 2개의 Virtual DOM를 가지고 있습니다.