Vue.js의 핵심 기능과 성능 및 확장성의 큰 요소는 필요할 때 실제 DOM을 효율적으로 업데이트하기 위해 Virtual Dom을 활용하는 것입니다. 이 과정은 아래에서 설명하는 컴포넌트 템플릿 렌더링 단계에서 백그라운드에서 발생합니다. 먼저 DOM이 무엇인지 살펴보겠습니다.
DOM(Document Object Model)이란?
DOM(Document Object Model)은 HTML 문서를 트리 구조로 취급하는 인터페이스로, 각 노드가 문서의 일부를 나타내는 객체이다. DOM은 노드의 논리적 트리와 같은 문서를 나타냅니다.
DOM 메서드는 트리에 대한 프로그래밍적인 방식의 액세스를 허용하며 문서의 내용, 스타일, 구조를 변경할 수 있게 해줍니다. 노드는 또한 DOM에 이벤트 핸들러를 연결할 수 있습니다.
최신 애플리케이션에서는 DOM 트리가 매우 크고 수천 개의 노드를 가질 수 있습니다. DOM 검색 및 업데이트는 성능에서 큰 병목현상을 가져올 수 있습니다. 이것이 가상 DOM이 생긴 이유입니다.
Virtual DOM이란?
가상 DOM은 웹 페이지의 실제 DOM을 자바스크립트 객체로 나타내는 방식입니다. HTML 요소가 주어지면 가상 노드를 생성하여 이를 나타낼 수 있습니다.
Vue는 이 가상 노드를 실제 DOM 노드로 변환하는 방법을 가지고 있습니다. 가상 노드가 Vue를 변경하기 시작하면 새 상태와 이전 상태를 비교하여 DOM을 업데이트해야 하는지 여부를 결정합니다. 이 프로세스를 reconciliation이라고 부릅니다. 만약 변경이 필요한 경우에 트리의 나머지 부분은 유지되고 연관된 DOM 노드만 변경됩니다.
컴포넌트 템플릿 렌더링
컴포넌트 템플릿 렌더링에는 두 단계로 진행됩니다.
Step1. 렌더링 함수로 템플릿을 컴파일 합니다.
Step2. 우리가 우리의 브라우저에서 볼 DOM에 올라갈 가상 노드를 만드는 render 함수를 실행
Step1은 한 번만 수행되며 성능향상을 위해 서버에서 수행할 수 있습니다. prototyping의 경우 컴파일도 클라이언트에서 수행될 수 있지만 Vue.js 런타임 컴파일러가 포함되어야한다.
Step2는 컴포넌트 라이프사이클에 올라가는 중에클라이언트에서 한 번 수행되며, 매번 diff 알고리즘으로 템플릿을 다시 렌더링할지 결정합니다.
Reference
'Vue 스터디' 카테고리의 다른 글
| Vuex란? (0) | 2021.05.19 |
|---|---|
| How the virtual DOM works in Vue.js (0) | 2021.05.10 |
| Vue.js의 Render 함수 (0) | 2021.05.07 |
| render : h => h(App)?? (0) | 2021.05.07 |
| Vue 스터디 4일차 (템플릿 문법) (0) | 2021.05.04 |