처음부터 가상 DOM 설계: 단계별 가이드

React나 Vue와 같은 프런트엔드 라이브러리에 대해 들어보신 적이 있다면 Virtual DOM이라는 용어를 접하셨을 것입니다. Virtual DOM은 DOM 업데이트를 더욱 효율적으로 만들어 웹 개발 속도를 높이는 데 도움이 되는 영리한 개념입니다.

이 가이드에서는 일반적인 코드와 유사한 단계를 사용하여 처음부터 간단한 가상 DOM을 구현하는 방법을 자세히 설명합니다.

가상 DOM이란 무엇입니까?

Virtual DOM은 실제 DOM(웹 페이지 구조)을 메모리 내에서 간단히 표현한 것입니다. (느린) 실제 DOM을 직접 업데이트하는 대신, 먼저 Virtual DOM을 변경하고 무엇이 변경되었는지 파악한 다음 실제 DOM에서 업데이트가 필요한 부분만 업데이트합니다. 이렇게 하면 시간이 절약되고 앱이 더 빨라집니다!

---

1단계: 가상 DOM을 트리로 표현

웹 페이지의 구조를 트리로 상상해 보세요. 여기서 각 요소(예:

,

또는

)는 트리의 '노드'입니다. 가상 DOM 노드는 이러한 요소 중 하나를 나타내는 작은 객체입니다.

예:

Virtual DOM Node:
{
  type: 'div',
  props: { id: 'container' },  // attributes like id, class, etc.
  children: [                 // children inside this element
    {
      type: 'p',              // a <p> tag (paragraph)
      props: {},
      children: ['Hello, world!']  // text inside the </p><p> tag
    }
  ]
}
</p>

"Hello, world!".

텍스트가 있는 요소

핵심 포인트:

• 각 노드에는 유형(예: div, p)이 있습니다.
• props(id, class 등)를 가질 수 있습니다.
• 다른 요소나 텍스트가 될 수 있는 하위 요소도 있습니다.

---

2단계: 가상 DOM을 실제 DOM으로 렌더링

이제 가상 DOM이 있으므로 이를 페이지의 실제 HTML로 변환할 수 있는 방법이 필요합니다.

가상 DOM 노드를 가져와 실제 HTML 요소로 변환하는 render라는 함수를 작성해 보겠습니다.

function render(vNode) {
  // 1. Create a real element based on the Virtual DOM type (e.g., div, p).
  const element = document.createElement(vNode.type);

  // 2. Apply any attributes (props) like id, class, etc.
  for (const [key, value] of Object.entries(vNode.props)) {
    element.setAttribute(key, value);
  }

  // 3. Process the children of this Virtual DOM node.
  vNode.children.forEach(child => {
    if (typeof child === 'string') {
      // If the child is just text, create a text node.
      element.appendChild(document.createTextNode(child));
    } else {
      // If the child is another Virtual DOM node, recursively render it.
      element.appendChild(render(child));
    }
  });

  return element;  // Return the real DOM element.
}

여기서 무슨 일이 일어나는가?

• 요소(document.createElement(vNode.type))를 생성합니다.
• ID, 클래스 등의 모든 속성을 추가합니다.
• 각 하위 요소에 텍스트를 추가하거나 다시 렌더링을 호출하여 하위 요소(텍스트 또는 기타 요소)를 처리합니다.

---

3단계: 기존 가상 DOM과 새 가상 DOM 비교(비교)

웹 앱에서 무언가 변경되면(예: 텍스트나 요소의 스타일) 새로운 가상 DOM을 만듭니다. 하지만 실제 DOM을 업데이트하기 전에 이전 가상 DOM과 새 가상 DOM을 비교하여 무엇이 변경되었는지 파악해야 합니다. 이를 '비교'라고 합니다.

두 가상 DOM을 비교하는 함수를 만들어 보겠습니다.

Virtual DOM Node:
{
  type: 'div',
  props: { id: 'container' },  // attributes like id, class, etc.
  children: [                 // children inside this element
    {
      type: 'p',              // a <p> tag (paragraph)
      props: {},
      children: ['Hello, world!']  // text inside the </p><p> tag
    }
  ]
}
</p>

비교 작동 방식:

• 노드 유형 변경: 요소 유형이 변경되면(예:
  를

  로 변경) 교체 대상으로 표시합니다.

• 텍스트 변경: 내부 텍스트가 변경되면 텍스트가 업데이트됩니다.
• 속성 및 하위: 요소의 속성(props) 또는 하위 요소가 변경되었는지 확인합니다.

---

4단계: Real DOM 패치

변경된 내용을 알고 나면 해당 변경 사항을 실제 DOM에 적용해야 합니다. 우리는 이 과정을 패치라고 부릅니다.

패치 기능은 다음과 같습니다.


function render(vNode) {
  // 1. Create a real element based on the Virtual DOM type (e.g., div, p).
  const element = document.createElement(vNode.type);

  // 2. Apply any attributes (props) like id, class, etc.
  for (const [key, value] of Object.entries(vNode.props)) {
    element.setAttribute(key, value);
  }

  // 3. Process the children of this Virtual DOM node.
  vNode.children.forEach(child => {
    if (typeof child === 'string') {
      // If the child is just text, create a text node.
      element.appendChild(document.createTextNode(child));
    } else {
      // If the child is another Virtual DOM node, recursively render it.
      element.appendChild(render(child));
    }
  });

  return element;  // Return the real DOM element.
}

주요 작업:

• 교체: 한 요소를 다른 요소로 완전히 교체합니다.
• 텍스트: 요소 내부의 텍스트를 업데이트합니다.
• 업데이트: 변경 사항에 따라 속성과 하위 항목을 업데이트합니다.

---

가상 DOM 프로세스 요약:

1. 가상 DOM 트리: 웹페이지에서 요소와 해당 계층을 나타내는 트리와 같은 구조를 만듭니다.
2. 실제 DOM으로 렌더링: 이 가상 DOM은 실제 HTML 요소로 변환되어 페이지에 배치됩니다.
3. 비교 알고리즘: 무언가 변경되면 이전 가상 DOM과 새 가상 DOM을 비교하여 차이점을 찾습니다.
4. 실제 DOM 패치: 가능한 가장 효율적인 방법으로 변경 사항을 실제 DOM에 적용합니다.

---

최종 생각

Virtual DOM은 실제 DOM에 대한 불필요한 변경을 줄여 사용자 인터페이스를 더 빠르게 업데이트할 수 있는 강력한 도구입니다. Virtual DOM을 구현함으로써 웹 앱이 요소를 업데이트하고 렌더링하는 방식을 최적화하여 더 빠르고 원활한 사용자 경험을 제공할 수 있습니다.

이것은 Virtual DOM 개념의 기본 구현이지만 이제 React와 같은 프레임워크가 이를 어떻게 활용하는지 이해할 수 있는 기초가 생겼습니다!