How the virtual DOM works in Vue.js

728x90

Vue.js는 빠른 로딩 속도와 쉬운 확장성으로 유명한 자바스크립트 프레임워크입니다. 일부 기능은 필요에 따라 실제 DOM을 업데이트하기 위해 가상 DOM을 사용하는 데 직접 연결할 수 있습니다.

가상 DOM을 이해하는 것은 Vue.js를 배우는 데 필요한 조건은 아니지만, 새로운 Vue 개발자들이 뒤에서 일어나는 몇몇 일들을 이해하는데 확실히 도움이 될 수 있다.

The DOM itself

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>This is a Heading</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

Vue.js 가상 DOM에 대해 이야기하기 전에 DOM 자체가 무엇인지 이해하는 것이 중요합니다. Document Object Model 또는 DOM은 모든 마크업 언어(사용자 HTML)를 연결된 노드로 처리하는 인터페이스의 일종이다. 트리와 같은 구조물에 저장된 마크업 요소를 위한 객체의 인터페이스로 볼 수 있다.

DOM은 우리가 요소에 대한 스타일을 쓰고 변경할 수 있게 해주고 심지어 요소 자체를 바꿀 수 있게 해줍니다. 이 작업은 요소 태그 또는 CSS 스타일이 노드 및 개체로 표시되므로 문서의 헤드와 본문에 요소 태그 또는 CSS 스타일을 추가, 수정 또는 삭제하여 수행됩니다. 이것이 HTML DOM의 작동 방식입니다. 그렇다면 Vue가 왜 다른 DOM을 가지고 있을까요?

Wireframe of the HTML DOM

Why the traditional DOM is not enough

그러나 애플리케이션이 확장됨에 따라(더 많은 노드를 통과하고, 더 많은 요소를 구성하며, 이러한 요소와 통신하는 스크립트가 증가함) DOM은 속도가 느려지고 처리 성능이 크게 저하됩니다.

검색을 수행하거나 DOM을 업데이트하려는 시도는 어려운 작업이 되어 궁극적으로 애플리케이션의 성능에 영향을 미친다. 이것이 가상 DOM이 생성된 이유입니다.

The Vue.js virtual DOM

Vue.js 팀은 가상 DOM을 전통적인 DOM의 추상화처럼 만들기 위해 구축했습니다. 이것은 HTML DOM의 가벼운 버전이라고 볼 수 있습니다. 가상 DOM은 더 똑똑해서 기존의 DOM보다 더 효율적인 방법을 찾습니다.

이 작업을 수행하는 주된 방법은 문서에 대한 새로운 변경 또는 업데이트 후 전체 DOM이 리렌더링되지 않도록 하기 위한 다양한 diff 알고리즘을 사용하는 것입니다. DOM API의 호출 빈도가 낮기 때문에 이 기능만으로도 효율성과 리소스 관리가 크게 향상됩니다.

이 설명에 의하면 가상 DOM은 실제 DOM과 Vue 인스턴스 사이에 위치합니다.

new Vue({
 el: '#app',
 data: {
   text: 'hi LogRocket'
 },
 render(createElement) {
   return createElement(
    'h1',
    { attrs: { id: 'headers' } },
  this.text
  );
 }
});

렌더링 시 아래 요소를 반환합니다.

<div id=’app’>
 <h1 id=’headers’>hi LogRocket</h1>
</div>

Vue 가상 DOM은 Vue 인스턴스를 확장하는 JavaScript 개체인 Vue 컴포넌트로 이루어져 있습니다. Vue는 실제 DOM에 비해 속도와 효율성이 크게 다르기 때문에 가상 DOM을 사용합니다. 가상 DOM은 실제 DOM보다 크기가 작기 때문에 매우 효율적입니다.

How it works

조건문이 있는 양식을 사용하여 가상 DOM의 작동 방식을 보여드리겠습니다.

<form>
     <div>
         <div class=”form-group” :class=”{‘form-group — error’: $v.name.$error }”>
             <label class=”form__label”>Full Name</label>
             <input class=”form__input” v-model.trim=”$v.name.$model”/>
         </div>
          <span class=”error” v-if=”!$v.name.required”>Field is required</span>
     </div>
</form>

이름을 입력하지 않은 경우 위의 코드 블록에 오류 클래스를 표시하는 v-if 문이 포함된 범위가 어떻게 되는지 확인하십시오. 이 코드에서 "필드가 필요합니다"를 나타내는 상자에 이름을 입력하지 않으면 작은 스팬 라인이 나타납니다. v-if 조건이 true로 반환되는 경우 가상 DOM의 변경 사항은 이 스팬 요소를 조건부로 추가하는 것입니다.

이 줄을 읽기 전에 실제 DOM과 가상 DOM이 동일하게 판독됩니다. 이 조건이 충족된 후에는 두 상태(실제 DOM과 가상 DOM에서) 간에 차이가 발생하고, 이 DOM은 변경 내용의 패치를 다시 렌더링하지 않고 실제 DOM에 적용합니다. 이렇게 하면 두 DOM이 즉시 동일한 상태로 돌아갑니다.

How to mount a virtual DOM to an HTML element

기본적으로 이미 Vue의 가상 DOM을 사용하고 있음을 알 수 있습니다. main.js 파일로 이동할 때 이 사실을 확인할 수 있습니다. 이 코드는 아래 코드 블록과 다소 유사해야 합니

다.

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  components: { App }
});

여기서 요소는 App의 ID를 가진 모든 요소이며, 일반적으로 App.vue 파일의 App 컴포넌트입니다. 컴포넌트 내에서 el 옵션을 사용하여 원하는 요소를 특정 대상으로 지정할 수 있으며, 이 요소는 HTML DOM에 마운트됩니다.

Reference

https://blog.logrocket.com/how-the-virtual-dom-works-in-vue-js/