DOM과 Virtual DOM

# 가상돔에 대한 소개

리액트(react.js)나, 뷰(Vue.js)는 가상돔(Virtual DOM)을 사용해서 원하는 화면을 브라우저에 그려준다.

자체적으로 상당히 효율적인 알고리즘을 사용해서 그려주기 때문에 그 속도가 어마어마 하다.

 

 

# DOM이란?

브라우저를 돌아다니다 보면 수 많은 컴포넌트로 구성된 웹페이지들을 보게 된다. 그 페이지를 문서(document)라고 하고, 페이지를 이루는 컴포넌트를 엘리먼트(element)라고 한다. DOM은 이 엘리먼트를 tree 형태(= DOM TREE)로 표현한 것이다.

 

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

 

 

# DOM 사용 예시

// 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)

가상DOM이란?

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

 

가상DOM은 실제 DOM과 구조가 완벽히 동일한 복사본 형태라고 보시면 된다. 

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

 

 

# DOM 조작 과정

만일 인스타그램의 좋아요 버튼을 누른다면

출처 : https://mainia.tistory.com/5280

화면이 바뀌어야 한다. 저 빨간색 하트에 해당되는 엘리먼트 DOM 요소가 갱신돼야 한다는 것이다. DOM을 조작해야 한다는 의미

 

[STEP 1]

이 과정에서 리액트는 항상 2가지 버전의 가상DOM을 가지고 있다. 

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

리액트는 state가 변경돼야만 리렌더링이 된다. 그 때, 바로 2번에 해당되는 가상 DOM을 만드는 것이다.

 

[STEP 2 : diffing]

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

 

[STEP 3 : 재조정(reconciliation)]

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

 

 

 

# Batch Update

리액트는 state를 batch 방법으로 update 한다. 변경된 모든 엘리먼트를 한꺼번에 반영할 수 있는 방법이기도 하다.

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

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