React-23

최광희·2023년 12월 24일

목록 보기

23/44

DOM과 Virtual DOM

[학습 목표]
1. 리액트에서 화면을 그리는 방식인 Virtual DOM 개념에 대해 이해하실 수 있어요.

01. 개요

(1) 가상돔에 대한 소개부터

리액트(react.js)나, 뷰(Vue.js)는 가상돔(Virtual DOM)을 사용해서 원하는 화면을 브라우저에 그려줍니다. 자체적으로 상당히 효율적인 알고리즘을 사용해서 그려주기 때문에 그 속도가 어마어마 해요 😎

가상돔의 동작 원리를 사실 우리는 알지 못해도 워낙 알아서 촥촥 처리해주어 화면을 그리기 때문에 꼭 알아야 할까요? 라는 궁금증이 생길 수도 있지만, 리액트로 프론트엔드를 개발하는 사람이라면 기본소양 정도로 가볍게라도 한번 듣고 넘어가는 것은 중요할 것 같아요

(개발자 취업 면접 질문에도 종종 등장한답니다)

02. DOM

(1) DOM이란?

가상 돔(Virtual DOM)을 이해하기 위해서는 먼저 DOM(Document Object Model)을 이해할 필요가 있어요. 브라우저를 돌아다니다 보면

수 많은 컴포넌트로 구성된 웹페이지들을 보게 돼요. 그 페이지를 문서(document)라고 하구요. 페이지를 이루는 컴포넌트를 엘리먼트(element)라고 해요.

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

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

API라는 말이 헷갈리나요? 단순히 HTML 요소에 접근해서 수정할 수 있는 함수 정도로 이해해도 좋아요

(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>

03. 가상DOM(Virtual DOM)

(1) 가상DOM이란?

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

가상 DOM에 대해 공부를 하게 되면 이 그림을 상당히 자주 보게 되는데요, 가상DOM은 실제 DOM과 구조가 완벽히 동일한 복사본 형태라고 보시면 됩니다 😎

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

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

가상 DOM이 실제 DOM을 변경하는 것은 아니라면, 도대체 어떻게 화면이 바뀌게 되는 것일까요?

(2) DOM 조작 과정

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

출처 : https://mainia.tistory.com/5280
화면이 바뀌어야 하죠. 저 빨간색 하트에 해당되는 엘리먼트 DOM 요소가 갱신돼야 한다는 거에요. DOM을 조작해야 한다는 의미입니다.
[STEP 1]
이 과정에서 리액트는 항상 2가지 버전의 가상DOM을 가지고 있어요.
화면이 갱신되기 전 구조가 담겨있는 가상DOM 객체
화면 갱신 후 보여야 할 가상 DOM 객체
리액트는 state가 변경돼야만 리렌더링이 되죠. 그 때, 바로 2번에 해당되는 가상 DOM을 만드는거죠.
[STEP 2 : diffing]
state가 변경되면 2번에서 생성된 가상돔과 1번에서 이미 갖고있었던 가상돔을 비교해서 어느 부분(엘리먼트)에서 변화가 일어났는지를 상당히 빠르게 파악해내요.
[STEP 3 : 재조정(reconciliation)]
파악이 다 끝나면, 변경이 일어난 그 부분만 실제 DOM에 적용시켜줘요. 적용시킬 때는, 한건 한건 적용시키는 것이 아니라, 변경사항을 모두 모아 한 번만 적용을 시켜요(Batch Update 🔥)