Vue3 딥 다이브 : Virtual DOM과 코어 Module 알아보기

뷰 마스터리의 무료 강의를 요악 정리한 내용입니다.

무료 인트로 강의 치고 배울 점이 굉장히 많습니다.

https://www.vuemastery.com/courses/vue3-deep-dive-with-evan-you/vue3-overview

Vue 3 Overview - Vue 3 Deep Dive with Evan You | Vue Mastery

---

DOM이란?

브라우저 화면에 보이는 것을 변경하기 위한 프로그래밍 인터페이스.

개발자는 DOM을 통해 브라우저 화면에 보이는 것을 조작할 수 있음

HTML은 DOM에 매핑되며, 이를 프로그래밍 적으로 조작해 화면에 보이는 것을 컨트롤 할 수 있다.

개발자는 아래와 같이 DOM API로 화면에 보이는 것을 변경한다.

let item = document.getElementsByTagName("h1")[0];
item.textContent = "New Heading";

DOM 조작은 성능에 큰 부하를 줄 수 있음

• 한 화면에 수천 개의 보여줄 거리가 있을 수 있음 ex 엑셀
• 이럴 경우 효과적으로 화면을 업데이트하기 위한 방안이 필요함
  • 화면의 모든 것을 다시 계산, 페인트 한다면 너무 비싼 연산
  • 최적화 코딩도 어려움
  • 60프레임을 사수하기 위해선 배치 처리가 필요함
• 최적화된 API, 개발에 편리한 API를 제공하는 것이 Vue와 같은 모던 프론트엔드 프레임워크
  • heavy lifting!

최적화된 API, 개발에 편리한 API를 제공하는 것이 Vue와 같은 모던 프론트엔드 프레임워크

---

Virtual DOM

DOM 사용 및 조작의 근본적인 문제는 일부 페이지에 수천 개의 노드가 있다는 것입니다.

이것이 Vue와 같은 일부 프레임워크에 Virtual DOM이라는 것이 있는 이유입니다.

가상 DOM은 JavaScript 객체로 실제 DOM을 나타내는 방법임

Vue의 가상 노드 Virtual Node(VNode)

Render Function

Vue는 템플릿을 통해 가상 노드를 생성하기 전에 먼저 템플릿을 Render 함수로 컴파일합니다.

VNode를 만드는 Render Function

• 렌더 함수는 DOM을 업데이트하기 위해 Vue로 전송되는 가상 노드를 생성합니다.
• 렌더 함수가 사용하는 데이터가 변경되면 렌더 함수가 다시 실행되어 새로운 가상 DOM 노드를 생성합니다.
  • 그런 다음 Vue는 이전 노드와 새 노드를 가져와 두 노드를 비교하고 적절한 DOM을 만들어 웹 페이지를 변경합니다.

VNode간 비교를 최소화하고, DOM 업데이트를 배치 처리

주 : document에 연결된 컨테이너에 dom 업데이트를 지연하면 불필요한 렌더링 패스 수행을 최소화 가능

위에 언급한 것과 같이, 29층의 인테리어를 변경해야 한다면

• 건물을 1층부터 다시 짓거나
• 설계도에서 변경된 부분을 파악하고, 해당 부분만 변경할 수 있음
  • 이것이 Virtual DOM의 역할!

virtual dom은 실제로 변경된 부분만 시공하기 위한, 변경된 부분만 반영한 설계도라 생각할 수 있다.

---

Vue3의 핵심 3개 모듈

Reactivity Module

반응형 객체를 만들어, 변경된 부분만 DOM에 반영할 수 있도록 해줌

Compiler Module

템플릿을 파싱해서 렌더 함수로 변환함

• 브라우저에선 런타임에 수행 가능
• Vue3 프로젝트를 빌드할 경우 빌드 과정에서 수행

Renderer Module

렌더러에는 컴포넌트를 웹 페이지에 렌더링하는 3가지 다른 단계에 대한 코드가 포함되어 있습니다.

• 렌더 단계(Render Phase)
  • 렌더 함수가 호출되어 Virtual DOM이라고 하는 실제 DOM의 설계도(JS 객체)를 반환함
  • Virtual DOM은 브라우저에 렌더링될 실제 DOM의 JavaScript 객체 표현(설계도)입니다.
• Mount(또는 Create) Phase:
  • 렌더러는 가상 DOM 객체를 가져와 실제 DOM JavaScript 호출을 통해 웹 페이지를 생성합니다.
• Patch(또는 Update) Phase:
  • 렌더러는 두 개의 Virtual DOM 객체(이전 객체와 새 객체)를 가져와 비교합니다.
  • JavaScript DOM API를 사용하여 변경된 웹 페이지 부분만 업데이트합니다.

렌더러 모듈의 역할

Vue3의 동작 요약

1. 컴파일러 모듈이 뷰 탬플릿(Html)을 렌더 함수로 변경함

컴파일러 모듈은 탬플릿을 렌더 함수로 파싱함

2. 리액티비티 모듈이 객체를 반응형으로 만든다(초기화한다)

리액티비티 모듈은 객체에 반응성을 제공함

3. 렌더 함수는 반응형 객체를 구독하고 있다가, 해당 객체가 변경되면 VNode를 반환한다.

렌더 phase > mount/patch phase

렌더 함수는 반응형 객체의 변경 시 호출되어 VNode를 반환함

4. 렌더러 모듈은 VNode를 이용해 Real DOM을 만든다.

리액트의 Reconcilation(조정)이 뷰의 마운트(크리에이트), 패치(업데이트)에 해당한다.

렌더러 모듈은 Reconcilation을 담당한다 돔이 처음 반영되는 경우 마운트가 발생한다.

5. 반응형 객체의 변경은 리렌더링을 유발한다.

초기 마운트가 아니면 패치(업데이트)가 일어난다.

렌더러 모듈은 Reconcilation을 담당한다 돔이 업데이트 되는 경우 패치가 발생한다

---

참고

vue js 공식문서에는 mount phase, patch phase와 같은 렌더러 모듈의 동작에 대한 설명이 없다.

• 마운트, 업데이트 시 반응형 객체가 변경되며,
• 특정 로직이 객체의 변경이 돔에 반영되기 전,후 (onBeforeX,onX)어떤 시점에 실행되는 것이 타당한지를 고려해보면 되겠다
  • 반응형 객체 변경에 의한 data fetch 등 > onBeforeX
  • 애니메이션, 차원 측정과 같은 dom에 정보가 반영된 이후의 동작 > onX

https://vuejs.org/api/composition-api-lifecycle.html#onmounted

Composition API: Lifecycle Hooks | Vue.js