[React] Virtual DOM 동작 원리

eastZoo·2024년 5월 14일

DOM React VirtualDOM

React

목록 보기

11/15

Virtula DOM을 알기위해 먼저 DOM이란 뭔지 알아야한다.

0️⃣ DOM(Document Object Model)

DOM은 문서 객체 모델이라고 하는데 결국은 브라우저에서 다룰 HTML 문서를 파싱하여 문서의 구성요소들을 객체로 구조화하여 나타낸 것 이라고 해요.

🧐 참조 : https://www.w3schools.com/js/js_htmldom.asp

DOM 은
"웹 페이지를 구성하는 요소를 구조화해서 나타낸 객체고 이 객체를 이용해서 웹 페이지 구성요소를 제어할 수 있다"라고 이해하면 된다.

🐸 : 간단하게 정리하면,
DOM은 브라우저와 자바스크립트가 HTML을 이해하기 쉽게 트리 구조로 표현한 객체입니다.
DOM은 웹 페이지의 객체 지향 표현이고, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. 기본적으로 자바스크립트에는 DOM을 조작할 수 있는 DOM API들을 제공하죠.

DOM코드

<ul class="fruits">
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>

Virtual DOM식으로 표현된 코드 ( Javascript 객체 )

// Virtual DOM representation
{
  type: "ul",
  props: {
    "class": "fruits"
  },
  children: [
    {
      type: "li",
      props: null,
      children: [
        "Apple"
      ]
    },
    {
      type: "li",
      props: null,
      children: [
        "Orange"
      ]
    },
    {
      type: "li",
      props: null,
      children: [
        "Banana"
      ]
    }
  ]
}

🐸 : 이제부터 DOM 이라는 단어가 나오면 위와 같은 트리 구조의 객체를 생각하고 아래의 객체를 변경하는 것이 DOM을 조작한다고 생각해봐요!!

1️⃣ DOM조작에 의한 렌더링 비효율문제

우리는 웹브라우저를 통해 원하는 페이지로 이동을 할 때 도메인을 이용한다.
도메인 주소로 접속을 하면 DNS 서버로 가서 실제 주소(서버)에 요청을 한다.
요청 후 서버는 해당 웹페이지의 index.html 등의 파일을 Response 해준다.
이 Response 파일들은 이제 앞서 설명한대로 브라우저와 자바스크립트가 HTML을 이해하기 쉽게 트리 구조로 표현된다.

Response files -> DOM Tree -> CSSOM(DOM + CSS) Tree -> Render Tree

Render Tree를 바탕으로 실제 화면에 웹페이지가 렌더링이 된다.

📝 비효율 문제 발생

위에서 생성된 DOM은 사용자로부터 새로운 요청이 있을때마다
( 버튼 클릭이나, 사이트 탐색과정 등..) 위의 과정을 거쳐 리렌더링을 하게 된다.

DOM을 반복적으로 직접 조작하여 브라우저가 렌더링을 자주하게 되고,
그 만큼 PC 자원을 많이 소모하게되는 문제가 발생한다.

예를 들어 JavaScript를 공부한 적이 있다면, getElementById() 또는 getElementByClass() 메서드를 사용하여 DOM의 내용을 수정할 수 있는 것을 알고 있을 것이다.

// Simple getElementById() method
document.getElementById('card').innerValue = 'updated value';

위와같이 코드를 JavaScript를 통해 화면의 변경사항을 DOM을 직접 조작하여 브라우저에 반영하여 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신된다.

즉, 화면에서 10개의 수정사항이 발생하면 수정할 때마다 새로운 랜더 트리가 10번 수정되면서 새롭게 만들어지게 되는 것이다.

DOM의 속도는 느리지 않지만. 매번 새롭게 요청하고 트리를 구성하기 때문에
노드의 수가 많아질 수록 속도가 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다.

또한, 최근 모던 웹은 SPA(Single Page Application)을 사용한다.
하나의 웹 페이지를 어플리케이션처럼 구성하는 SPA에서는 HTML 문서 자체가 하나이며,
여러 동적인 기능이 들어가기 때문에 안그래도 리소스가 모두 합쳐진 무거운 HTML 문서를 지속적으로 재랜더링 해줘야한다는 문제점이 발생하게 되었다.

2️⃣ Virtual DOM 의 필요성 등장?!

위와같은 문제점 으로부터 리액트 Virtual DOM의 필요성이 나타나게 된다.

1. 가상 DOM(Virtual DOM)이란 무엇인가요?

🐸 : 위에서 말했지만, 한번 더 정리하자면 DOM(Document Object Model)이란 HTML, XML 문서의 프로그래밍 인터페이스를 의미합니다. DOM은 문서의 구조화된( 트리구조 ) 표현을 제공하며, 프로그래밍 언어가 이를 변경할 수 있는 방법을 제공합니다.

가상 DOM은 이 DOM의 가벼운 복제본입니다.
리액트 애플리케이션에서 실제 DOM과는 별도로 존재하는 가상의 DOM입니다.

리액트는 이 가상 DOM을 사용하여 실제 DOM을 효율적으로 관리하고 업데이트합니다.

React 컴포넌트는 상태나 props가 변경될 때마다
새로운 Virtual DOM을 생성합니다. 이 Virtual DOM은 메모리 내에서 가볍게 생성되며, 기존의 Virtual DOM과 비교하기 위한 참조용으로 사용됩니다

2. 가상 DOM의 동작 원리

리액트의 가상 DOM 동작 원리는 다음과 같습니다:

☝🏻 초기 렌더링

가상 DOM 생성: 리액트 애플리케이션이 초기화될 때, 컴포넌트 트리의 각 요소에 대한 가상 DOM이 생성됩니다.
실제 DOM에 렌더링: 가상 DOM을 사용하여 실제 DOM에 렌더링합니다.
이벤트 리스너 등록: 각 요소에 이벤트 리스너를 등록하여 상호작용을 처리합니다.

✌🏻 상태 변화 시 업데이트

상태(State) 변경: 사용자 상호작용 또는 애플리케이션의 내부 상태 변경으로 인해 컴포넌트의 상태가 변경됩니다.
가상 DOM 업데이트: 변경된 상태를 기반으로 새로운 가상 DOM이 생성됩니다.
가상 DOM 비교: 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분을 찾습니다.
변경된 부분 실제 DOM에 반영: 변경된 부분만을 선택적으로 실제 DOM에 반영하여 리렌더링합니다.

🤟🏻효율성

배치(batching): 여러 상태 변화를 한 번에 처리하여 가상 DOM 비교와 실제 DOM 업데이트를 최소화합니다.
가상 DOM의 경량화: 가상 DOM은 실제 DOM보다 가벼우며, 변경 사항을 실제 DOM에 적용하는 과정에서 최적화됩니다.

3️⃣ 예시를 통한 이해

다음은 간단한 예시를 통해 가상 DOM 동작 원리를 이해하는 방법입니다.

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default MyComponent;

🐸 : 이제 이 함수형 컴포넌트의 동작을 설명해보겠습니다.

1. 초기 렌더링 시, 가상 DOM과 실제 DOM이 생성됩니다.
카운터의 초기값은 0입니다.
2. 버튼을 클릭하면 handleClick 함수가 호출되어 count 상태가 증가합니다.
3. 리액트는 변경된 상태를 기반으로 새로운 가상 DOM을 생성하고, 이전 가상 DOM과 비교합니다.
4. 변경된 부분(카운터의 값)만을 선택적으로 실제 DOM에 반영하여 리렌더링됩니다.

끝🙋🏻