DOM과 Virtual DOM

2023.02.10

DOM

(1) DOM이란?

가상 돔(Virtual DOM)을 이해하기 위해서는 먼저 DOM(Document Object Model)을 이해할 필요가 있다. 브라우저를 돌아다니다 보면 수 많은 컴포넌트로 구성된 웹페이지들을 보게 되는데, 그 페이지를 문서(document)라고 하고, 페이지를 이루는 컴포넌트를 엘리먼트(element)라고 한다.

DOM은 이 엘리먼트를 tree 형태(= DOM TREE)로 표현한 것이다.

(2) 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");

form validation도 이런식으로 가능하다.

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)

(1) 가상DOM이란?

리액트는 가상DOM을 이용해서 실제DOM을 변경하는 작업을 상당히 효율적으로 수행한다.

가상DOM은 실제 DOM과 구조가 완벽히 동일한 복사본 형태라고 보면된다. 실제 DOM은 아니지만, 객체(object) 형태로 메모리에 저장되기 때문에 실제 DOM을 조작하는 것 보다 훨씬 더 빠르게 조작을 수행할 수 있다.

(2) DOM 조작 과정

[STEP 1]

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

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

리액트는 state가 변경돼야만 리렌더링이 되기 때문에, 2번에 해당되는 가상 DOM을 만든다.

[STEP 2 : diffing]

state가 변경되면 2번에서 생성된 가상돔과 1번에서 이미 갖고있었던 가상돔을 비교해서 어느 부분(엘리먼트)에서 변화가 일어났는지를 상당히 빠르게 파악한다.

[STEP 3 : 재조정(reconciliation)]

파악이 다 끝나면, 변경이 일어난 그 부분만 실제 DOM에 적용시킨다. 적용시킬 때는 한건 한건 적용시키는 것이 아니라 변경사항을 모두 모아 한 번만 적용을 시킨다.(Batch Update 🔥)