React 입문 6 (DOM, VirtualDOM)

DOM이란? 📖

DOM (Document Obejct Model)이란 웹 문서의 구조화된 표현인데요

엘리먼트를 tree 형태로 표현한 것이 DOM입니다.

DOM

 

트리의 요소 하나하나를 `노드`라고 합니다. 각 `노드`는 해당 노드에 접근과 제어(DOM 조작)를 할 수 있는 API를 제공합니다.

// id가 demo인 녀석을 찾아, 'Hello World!'를 대입해줘.
document.getElementById("demo").innerHTML = "Hello World!";

// p 태그들을 모두 가져와서 element 변수에 저장해줘
const element = document.getElementsByTagName("p");

// 클래스 이름이 intro인 모든 요소를 가져와서 x 변수에 저장해줘
const x = document.getElementsByClassName("intro");

 

Virtual DOM이란? 📖

리액트에서는 가상DOM을 이용해 상태가 변경될 때 변경 사항을 가상DOM에 적용한 후 이전 가상DOM과 비교해 바뀐 부분만 실제 돔에 적용하는 방식으로 동작합니다.

 

Virtual DOM

 

객체(Object) 형태로 메모리에 저장되기 때문에 실제 DOM을 조작하는 것보다 훨씬 빠르게 조작을 수행할 수 있습니다.

 

동작 순서 ✨

• 1. 리액트는 항상 2가지 버전의 가상DOM을 가지고 있습니다.
  • 1-1. 화면이 갱신되기 전 구조가 담겨있는 가상 DOM 객체
  • 1-2. 화면 갱신 후 보여야 할 가상 DOM 객체를 가지고 있습니다.
    (state가 변경 되면 1-2번에 해당하는 가상 DOM을 만듭니다.)
• 2. diffing
  • state가 변경되면 이전 가상DOM과 변경된 가상 DOM을 비교
• 3. 재조정
  • 변경이 일어난 부분만 실제 DOM에 적용시켜줍니다.
• 4. Batch Update
  • 클릭 한 번으로 화면에 있는 5개의 엘리먼트가 바뀌어야 한다면?
  • 실제 DOM : 5번의 화면 갱신
  • 가상 DOM : Batch Update로 인해 한 번만 갱