Document Object Model의 약자로서 요소들(el)을 담고있는 문서(Doc)이다. 이는 트리형태로 이루어져 있다.
DOM 트리 안에는 각각의 노드가 존재하며, 각 API를 통해 요소에 접근하여 수정할 수 있다.
이는 자바스크립트에서 다음과 같은 코드로 DOM 조작을 할 수 있다.
getElementById();
querySelector();
리액트는 가상돔을 이용하여 실제돔을 조작한다. 가상돔은 실제돔과 같은 요소들을 가진다.
그러나 가상돔은 실제돔과 다르게 브라우저의 문서에 직접 접근은 불가능하다. 이 말은 화면에 보여지는 내용을 직접 수정할 수 없는 것이다.
그렇다면 이미 존재하는 실제 돔을 복제해서 따로 메모리에 저장하여 사용할까..?
리액트는 두 개의 가상돔을 가지고 있다.
리액트는 state가 변경될 때 마다 렌더링이 발생한다. 이 과정에서 리액트는 어떤 요소가 변했는지를 찾아내어 (Diffing이라고 한다.) 효율적인 알고리즘을 통해 빠르게 바뀐 Element만 적용시킨다. 이를 Reconciliation (재조정) 이라고 한다.
"Batch Update"는 변경된 모든 엘리먼드를 한번에 업데이트 시켜주는 작업이다. 화면에 그려주는 작업은 변경된 내용을 한번에 적용시켜 빠르고 효율적으로 작업 할 수 있다.