Virtual DOM

1. DOM과 버추얼 DOM의 차이
   – DOM (Document Object Model)
   • DOM은 웹 문서를 표현하는 트리 구조입니다. HTML 요소들이 각 노드로 표현되며, 브라우저는 DOM을 기반으로 페이지를 렌더링합니다.
   • 단점: DOM은 크고 복잡한 구조일 때 조작하는데 성능 이슈가 발생할 수 있습니다. 특히, DOM이 자주 변경되거나 다시 렌더링될 때 브라우저 성능에 부정적인 영향을 미칩니다. DOM을 직접 수정하면 브라우저는 그 내용을 즉시 반영해야 하므로 계산 비용이 큽니다.
   • 버추얼 DOM (Virtual DOM)
   • 버추얼 DOM은 메모리 내에 존재하는 가상의 DOM 트리입니다. 이는 실제 DOM의 경량화된 사본으로, 브라우저의 실제 DOM과는 독립적으로 작동합니다.
   • DOM에 직접 접근하는 대신, 프레임워크가 가상 DOM을 수정하고, 변경 사항을 메모리에 기록한 후 실제 DOM과 비교하여 필요한 부분만 효율적으로 업데이트합니다.
2. 버추얼 DOM의 작동 원리

1. 가상 DOM 생성
   • 애플리케이션이 처음 로드되면, Vue.js나 React는 컴포넌트의 상태를 기반으로 가상 DOM을 생성합니다.
   • 가상 DOM은 HTML 구조와 유사한 트리 구조로, 컴포넌트의 상태나 데이터를 반영한 가상 요소들로 이루어져 있습니다.
2. 상태 변화 감지
   • 컴포넌트의 데이터가 변경되면, Vue.js나 React는 변경된 데이터를 기반으로 새로운 가상 DOM을 다시 생성합니다. 이때, 프레임워크는 가상 DOM을 다시 계산합니다.
3. DOM Diffing (비교)
   • 새로운 가상 DOM과 이전에 생성된 가상 DOM을 **비교(diffing)**하여 두 트리의 차이점을 찾습니다.
   • 트리의 각 노드(요소)를 비교하면서, 변경된 부분만을 식별합니다.
4. 최소한의 업데이트 적용 (패칭)
   • 변경된 부분이 확인되면, 그 부분만 실제 DOM에 **패치(patch)**하여 업데이트합니다. 변경된 노드나 속성만을 수정하므로, 전체 DOM을 다시 그리는 것이 아니라 일부만 업데이트합니다.
   • 이 과정 덕분에 브라우저 성능을 최적화하고, 불필요한 DOM 조작을 최소화합니다.
5. 버추얼 DOM의 장점
   – 성능 최적화: DOM을 직접 조작하는 것보다 가상 DOM을 조작한 후, 실제 DOM과 비교하여 변경 사항만 업데이트하므로 브라우저 렌더링 성능이 향상됩니다.
   – 효율성: Vue.js와 같은 프레임워크는 필요한 부분만 업데이트하므로, 큰 애플리케이션에서도 효율적인 렌더링을 보장합니다.
   – 다양한 뷰 레이어 지원: 상태 변화에 따른 UI 갱신을 쉽게 관리할 수 있습니다. 데이터가 바뀌면 가상 DOM이 자동으로 갱신되고, 그에 따라 화면에 반영됩니다.
6. 실제 예시

예시: 상태가 변할 때마다 텍스트를 변경하는 간단한 Vue.js 코드

<template>
     <div>
       <p>{{ message }}</p>
       <button @click="changeMessage">Change Message</button>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         message: 'Hello, Vue!'
       };
     },
     methods: {
       changeMessage() {
         this.message = 'Hello, Virtual DOM!';
       }
     }
   };
   </script>

• 여기서 message가 변경되면, Vue는 가상 DOM을 다시 생성하고 이전 가상 DOM과 비교하여,

  {{ message }}

  부분만 실제 DOM에 패치합니다. 나머지 부분은 다시 렌더링되지 않습니다.
  5. DOM Diffing 과정
  1. 처음 렌더링 시점:

  • 초기 상태에서 가상 DOM이 생성되고, 전체 DOM이 렌더링됩니다.
    2. 상태 변경 시:
  • 컴포넌트 상태가 변경되면 새로운 가상 DOM 트리가 생성됩니다.
  • Vue.js나 React는 새로운 가상 DOM과 이전 가상 DOM을 비교하여 차이점을 찾습니다.
    3. 업데이트 시:
  • 차이점이 있는 부분만 실제 DOM에 반영됩니다. 예를 들어, message 텍스트만 변경되므로 \

    {{ message }}\

    요소만 업데이트됩니다.
    6. 버추얼 DOM을 사용하는 프레임워크

• React: 버추얼 DOM을 최초로 도입한 프레임워크 중 하나로, 컴포넌트 기반의 UI 구조에서 효율적인 DOM 조작을 위해 가상 DOM을 사용합니다.
• Vue.js: React의 아이디어에서 영감을 받아 버추얼 DOM을 사용하여 성능을 최적화합니다.
• Svelte: Svelte는 가상 DOM을 사용하지 않고 컴파일 단계에서 DOM 조작을 최적화하는 방식을 사용하지만, 대부분의 프레임워크는 가상 DOM을 활용합니다.