DOM

Document Object Model의 약자로서 요소들(el)을 담고있는 문서(Doc)이다. 이는 트리형태로 이루어져 있다.

DOM 트리 안에는 각각의 노드가 존재하며, 각 API를 통해 요소에 접근하여 수정할 수 있다.

이는 자바스크립트에서 다음과 같은 코드로 DOM 조작을 할 수 있다.

getElementById();
querySelector();

Virtual DOM

리액트는 가상돔을 이용하여 실제돔을 조작한다. 가상돔은 실제돔과 같은 요소들을 가진다.
그러나 가상돔은 실제돔과 다르게 브라우저의 문서에 직접 접근은 불가능하다. 이 말은 화면에 보여지는 내용을 직접 수정할 수 없는 것이다.

그렇다면 이미 존재하는 실제 돔을 복제해서 따로 메모리에 저장하여 사용할까..?

Virtual DOM의 DOM 조작

리액트는 두 개의 가상돔을 가지고 있다.

1. 렌더링 이전 화면 구조를 나타내는 가상돔
2. 렌더링 이후 화면 구조를 나타내는 가상돔

리액트는 state가 변경될 때 마다 렌더링이 발생한다. 이 과정에서 리액트는 어떤 요소가 변했는지를 찾아내어 (Diffing이라고 한다.) 효율적인 알고리즘을 통해 빠르게 바뀐 Element만 적용시킨다. 이를 Reconciliation (재조정) 이라고 한다.
"Batch Update"는 변경된 모든 엘리먼드를 한번에 업데이트 시켜주는 작업이다. 화면에 그려주는 작업은 변경된 내용을 한번에 적용시켜 빠르고 효율적으로 작업 할 수 있다.

정리

1. 리액트의 가상돔은 실제돔과 같은 내용을 담고 있는 복사본이다.
   그리고 이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어있다.
2. 리액트는 항상 두 개의 가상돔을 가지고 있다. 첫 번 째는 가상돔은 변경 이전의 내용을 담고있고, 두 번째 가상돔은 변경 이후에 보여질 내용을 담고 있다.
3. 변경된 내용이 화면에 그려지기 이전, 곧 실제 Dom이 변경되기 이전에 리액트는 두 개의 가상돔을 비교해서 정확히 어떤 부분이 바뀌었는지 효율적으로 비교하여 파악한다. 이러한 과정을 Diffing이라고 한다.
4. Diffing을 통해서 변경된 부분을 파악한 이후, Batch Update를 통해 실제돔에 한번에 적용시킨다. 이러한 과정을 Reconsiliation, 재조정이라고 한다.