실전 코드로 배우는 Vue.js

38

실전 코드로 배우는 Vue.js

2.1.3

Vue

에서 가상

DOM

이 작동하는 방식

가상

DOM

은 실제

DOM

과

Vue

애플리케이션 코드 사이에 자리 잡고 있다. 다음은 가상

DOM

에서 노드를 표현하는 예시다.

const node = {

tag: 'div',

attributes: [{ id: 'list-container', class: 'list-container' }],

children: [ /* 노드들의 배열 */]

}

이 노드를

VNode

라 부르자.

VNode

는 가상

DOM

속에 존재하며, 실제

DOM

에 존재하는

엘리먼트를 가리키는

가상 노드

virtual

node

다.

UI

상호작용을 통해 사용자는 엘리먼트의 변화 상태를

Vue

에 알린다.

Vue

는 가상

DOM

을

조작해 해당 엘리먼트의 표현 객체(

node

)를 원하는 모양으로 업데이트하며, 동시에 이러한

변경 사항을 추적한다. 마지막으로

Vue

는 실제

DOM

과 통신하며 변경된 노드에 따라

DOM

을 정확하게 업데이트한다.

가상

DOM

은 자바스크립트 객체 트리의 일종이므로 컴포넌트 업데이트는 일반적인 자바스

크립트 객체 업데이트와 같다. 이. 과정은 그리 오래 걸리지 않는다. 또한

DOM

API

를 호출

하지 않기 때문에 이러한 업데이트 작업은

DOM

리페인팅

repainting

을 유발하지 않는다.

가상

DOM