DOM과 Virtual DOM

DOM(Document Object Model)

엘리먼트를 tree 형태로 표현한 것

 

노드 : 트리의 요소 하나하나. 각각의 노드는 해당 노드에 접근과 제어(DOM조작)를 할 수 있는 API를 제공함

 

form validation에서 DOM 사용 예

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

 

 

 

---

가상DOM(Virtual DOM)

가상DOM은 실제 DOM과 구조가 완벽히 동일한 복사본 형태.

실제 DOM은 아니지만, 객체(object) 형태로 메모리에 저장되기 때문에 실제 DOM을 조작하는 것 보다 훨씬 더 빠르게 조작을 수행함.

 

리액트는 항상 2가지 버전의 가상DOM을 가지고 있다

1. 화면이 갱신되기 전 구조가 담겨있는 가상DOM 객체
2. 화면 갱신 후 보여야 할 가상 DOM 객체

 

리액트에서 DOM 조작 과정

인스타그램의 좋아요 버튼을 누르는 경우

1. 가상 DOM 객체을 만듦
2. diffing
   state가 변경되면 새로 생성된 가상돔과 이미 갖고 있었던 기존의 가상DOM을 비교해서 어느 부분(엘리먼트)에서 변화가 일어났는지를 빠르게 파악함
3. 재조정(reconciliation)
   파악이 다 끝나면, 변경이 일어난 그 부분만 실제 DOM에 적용시킴.
   적용시킬 때는, 한건 한건 적용시키는 것이 아니라, 변경사항을 모두 모아 한 번만 적용(Batch Update)

 

Batch Update

변경된 모든 엘리먼트를 한꺼번에 반영할 수 있는 방법

리액트에서 state의 경우도 batch 방법으로 update됨

 

클릭 한 번으로 화면에 있는 5개의 엘리먼트가 바뀌어야 한다면

• 실제 DOM : 5번의 화면 갱신 필요
• 가상 DOM : Batch Update로 인해 단 한번만 갱신 필요