⚙️ Vue.js 렌더링 흐름 - 템플릿과 DOM 업데이트 구조 이해하기

⚙️ Vue.js 렌더링 흐름 - 템플릿과 DOM 업데이트 구조 이해하기

Vue 기초 시리즈 > 3️⃣ Vue 작동 원리와 구조 이해 > 3️⃣ 템플릿 렌더링과 DOM 업데이트의 흐름

• 1. 렌더링이란?
• 2. Virtual DOM과 실제 DOM의 차이
• 3. Vue의 렌더링 순서
• 4. 반응형 업데이트 흐름
• 5. 성능 최적화 팁
• 🔚 마무리 & 다음 글 안내

---

1. 렌더링이란?

렌더링이란 Vue 템플릿을 HTML로 변환하고, 이를 브라우저의 DOM에 반영하는 과정입니다.

• 초기 렌더링: 컴포넌트가 마운트될 때 최초 1회
• 재렌더링: 반응형 상태가 변경되면 자동 업데이트

2. Virtual DOM이란?

Vue는 실제 DOM을 직접 조작하지 않고 Virtual DOM(VDOM)이라는 가상의 트리를 먼저 만든 후 변경 사항만 실제 DOM에 적용합니다.

항목	설명
실제 DOM	브라우저가 직접 렌더링하는 구조체
Virtual DOM	JavaScript 객체로 만들어진 가상 노드 트리
장점	최소 변경만 추적해 효율적으로 업데이트 가능

3. Vue 렌더링 순서

Vue 내부에서 템플릿이 실제 화면에 표시되기까지의 전체 흐름은 다음과 같습니다:

1. template 템플릿 작성 (또는 render() 함수)
2. Vue가 템플릿을 Virtual DOM 노드로 변환
3. 최초 렌더링 시 → 실제 DOM에 삽입
4. 데이터 변경 발생 시 → 변경된 부분만 비교(diff)
5. 변경된 노드만 실제 DOM에 Patch (수정)

4. 반응형 렌더링 구조

Vue의 반응형 시스템은 다음과 같은 흐름으로 작동합니다.

• 1. 반응형 변수 선언 (ref, reactive)
• 2. 컴포넌트가 해당 상태를 사용
• 3. 값 변경 발생 시 → effect() 트리거 (라이브러리 개발자나 뷰 내부에서 사용되는 트리거. 개발시에는 watchEffect(), watch(), computed() 를 사용)
• 4. 관련된 컴포넌트만 다시 렌더링 (Virtual DOM → Patch)

예시: 아래처럼 count가 변경되면 관련된 템플릿만 갱신됩니다.

<template>
  <p>Count: {{ count }}</p>
  <button @click="count++">+1</button>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

5. 렌더링 최적화 팁

• v-if보다는 v-show를 자주 쓰는 곳에 사용
• 무거운 컴포넌트는 defineAsyncComponent로 지연 로딩
• :key 값은 고유하고 예측 가능해야 효율적 렌더링 가능
• watchEffect 대신 computed 사용으로 렌더 최소화

🔚 마무리 & 다음 글 안내

이제 Vue가 템플릿을 어떤 흐름으로 렌더링하고 업데이트하는지 정확히 이해하셨나요?

다음 글에서는 Vue의 이벤트 바인딩과 DOM 반응성 처리 구조를 더 깊이 있게 다루겠습니다.

👉 다음 글: 이벤트 바인딩과 DOM 반응성 처리 구조