27. virtual DOM

내용

이 강의에서는 Vue.js의 가상 DOM에 대해 설명합니다.
가상 DOM은 주로 이론적인 개념으로, Vue가 자동으로 처리해주므로 개발자는 크게 신경 쓸 필요가 없지만, Vue를 사용하면서 자주 듣게 되므로 이에 대한 이해가 중요합니다.

1. 컴파일: 프로그래밍에서 컴파일은 코드를 다른 코드로 변환하는 과정을 의미합니다.
   Vue는 템플릿을 문자열에서 자바스크립트 객체로 컴파일합니다.
2. 가상 DOM의 필요성: 가상 DOM은 관리가 용이하고, 특히 큰 애플리케이션에서 성능 향상을 제공합니다.
3. DOM: 문서 객체 모델(DOM)은 브라우저가 HTML을 객체로 변환하여 다루는 방식입니다.
   DOM을 사용하여 문서의 요소를 선택하고 변경할 수 있습니다.
4. 가상 DOM의 효율성: 전통적인 DOM 조작은 많은 요소와 데이터 변경이 있는 경우 성능 저하를 일으킬 수 있습니다.
   가상 DOM은 실제 DOM의 가벼운 복사본으로, 요소 검사 및 변경 과정을 더 빠르고 효율적으로 만듭니다.
5. 패치 과정: 가상 DOM은 필요한 부분만 업데이트하는 '패치' 과정을 수행합니다.
   이는 전체 템플릿을 다시 렌더링하는 것보다 효율적입니다.
6. 클래스 및 ID의 불필요성: 가상 DOM을 사용하면 요소를 선택하기 위해 클래스나 ID를 추가할 필요가 없습니다.
   Vue는 데이터가 변경될 때 필요한 부분만 정확하게 업데이트합니다.

이 강의는 가상 DOM의 개념과 작동 방식, 그리고 Vue에서의 활용에 대해 설명하며, 가상 DOM이 Vue 애플리케이션의 성능과 효율성을 어떻게 향상시키는지를 중점적으로 다룹니다.

Vue Compiling the Template 1

<template>
   <h1 class="blue">
      Hello World
   </h1>
</template>

Vue Compiles to

{
    tag: 'h1',
    attributes: {
        class: 'blue',
    },
    content: 'Hello World',
}

Vue Compiling the Template 2

<template>
   <h1 class="blue">
      <span>
         Hello World
      </span>
   </h1>
</template>

Vue Compiles to

{
    tag: 'h1',
    attributes: {
        class: 'blue',
    },
    content: [
       {
           tag: 'span',
           attributes: {},
           content: 'Hello World',
       }
    ]
}

Updates using the DOM

Data                                    DOM

James  --- Should I delete this? --->  <p>James</p>

Albert --- Should I delete this? --->  <p>Albert</p>

Sam --- Should I delete this? --->     <p>Sam</p>

Updates using the Virtual DOM

Data                                    Virtual DOM                     DOM

James  --- Should I delete this? --->  <p>James</p>                     <p>James</p>

Albert --- Should I delete this? --->  <p>Albert</p>                    <p>Albert</p>

Sam --- Should I delete this? --->     <p>Sam</p>       --- Delete ---> <p>Sam</p>