[리액트 숙련주차] 2-11 DOM과 Virtual DOM

2-11 DOM과 Virtual DOM

1. 가상돔이란?

- 리액트나 뷰는 가상돔을 사용해서 원하는 화면을 브라우저에 그려줌

- 자체적으로 효율적인 알고리즘을 사용하여 그려주기 때문에 속도가 어마어마함

2. DOM (Document Object Model)

- 브라우저는 수많은 컴포넌트로 구성되어있음 -> 문서(document)

- 페이지를 이루는 컴포넌트를 엘리먼트(element)라고 함

=> DOM은 엘리먼트를 tree형태(DOM tree)로 표현한 것

- 트리의 요소 하나하나를 노드라고 부르고, 해당 노드에 접근과 제어할 수 있는 API를 제공함

- API : HTML요소에 접근해서 수정할 수 있는 함수

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

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

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

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>

3. 가상 DOM (Vritual DOM)

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

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

- 객체 형태로 메모리에 저장되기 때문에 실제 DOM을 조작하는 것 보다 훨씬 더 빠르게 조작할 수 있음

- 실제 DOM을 조작하는 것보다, 메모리상에 올라와있는 javascript 객체를 변경하는 작업이 훨씬 더 가벼움

- 어떻게 화면이 바뀌는 걸까?

4. 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번에서 이미 갖고있던 가상돔을 비교하여 어느 부분(엘리먼트)에서 변화가 일어났는지 상당히 빠르게 파악함

 

[Step 3 : 재조정(reconciliation)]

파악이 끝나면, 변경이 일어난 그 부분만 실제 DOM에 적용시켜줌

적용시킬 때는, 하나하나 적용시키는 것이 아니라 변경사항을 모두 모아 한 번만 적용을 시킴

=> Batch Update!!!!

5. Batch Update

- 리액트가 화면을 변경하는 방법

- 변경된 모든 엘리먼트를 한꺼번에 반영하는 방법

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

> 실제 DOM : 5번의 화면 갱신 필요

> 가상 DOM : Batch Update로 인해 단 한번만 갱신 필요

- 효율적인 이유? DOM에서 가장 비싼, 오래걸리는 작업은 painting 작업임

- 가상 DOM으로는 painting 작업을 한번으로 줄여주기 때문에 효율적임