Vue 공식문서를 살펴보면, 컴포넌트가 어떻게 생성되고, 업데이트되며, 소멸되는지에 대한 Lifecycle(생명주기) 설명을 볼 수 있습니다.
Lifecycle Hook을 활용하여 특정 시점에 코드를 실행하기 위해 꼭 알아야 하는 개념입니다.
1️⃣ 컴포넌트 생명주기 단계
- 생성 (Create & Mount)
- Create 단계: 컴포넌트의 데이터와 상태가 생성됨
- Mount 단계: 컴포넌트가
index.html같은 실제 DOM에 장착됨
- 업데이트 (Update)
- 데이터가 변경되어 컴포넌트가 다시 렌더링될 때 발생
- 소멸 (Unmount)
- 다른 페이지로 이동하거나 컴포넌트를 더 이상 사용하지 않을 때 DOM에서 제거됨
2️⃣ Lifecycle Hook 사용 이유
특정 시점에 코드를 실행하고 싶을 때 Lifecycle Hook을 사용합니다.
예를 들면:
- Mount 되기 전에 AJAX 요청으로 서버에서 데이터를 가져오거나,
- Update 되기 전에 데이터를 검증하는 등의 작업
Vue에서는 다음과 같은 Hook들을 제공합니다:
beforeCreate()created()beforeMount()mounted()beforeUpdate()updated()beforeUnmount()unmounted()
예시:
beforeUpdate(): 컴포넌트가 업데이트되기 전에 실행mounted(): 컴포넌트가 DOM에 장착된 후 실행
3️⃣ Vue3 <script setup>로 리팩토링
Vue3에서는 <script setup>을 사용하여 Composition API 방식으로 Lifecycle Hook을 보다 간편하게 사용할 수 있습니다.
주의:
created()는<script setup>에서는 직접 사용하지 않고, 컴포넌트 생성 시점의 로직은<script setup>의 최상위 코드에서 실행됩니다.
예시 코드
<template>
<div>
<!-- 컴포넌트 내용 -->
<p>Vue Lifecycle 예제입니다.</p>
</div>
</template>
<script setup>
import { reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
// 데이터 생성 (created와 동일한 시점에 실행됨)
const state = reactive({
message: 'Hello Vue3!'
})
// onBeforeMount: 마운트 되기 직전에 실행
onBeforeMount(() => {
console.log('컴포넌트가 곧 마운트됩니다.')
})
// onMounted: 컴포넌트가 마운트된 후 실행
onMounted(() => {
console.log('컴포넌트가 마운트되었습니다.')
// 예: 서버에서 데이터 가져오기 등
})
// onBeforeUpdate: 컴포넌트가 업데이트되기 전에 실행
onBeforeUpdate(() => {
console.log('컴포넌트가 업데이트되기 전입니다.')
})
// onUpdated: 컴포넌트가 업데이트된 후 실행
onUpdated(() => {
console.log('컴포넌트가 업데이트되었습니다.')
})
// onBeforeUnmount: 컴포넌트가 소멸되기 전에 실행
onBeforeUnmount(() => {
console.log('컴포넌트가 곧 소멸됩니다.')
})
// onUnmounted: 컴포넌트가 소멸된 후 실행
onUnmounted(() => {
console.log('컴포넌트가 소멸되었습니다.')
})
</script>
📌 정리
- 데이터 생성:
<script setup>최상위 코드에서 실행되므로, Vue2의created()와 유사한 시점에 동작합니다. - Lifecycle Hook: Vue3에서는
onMounted,onBeforeUpdate등 Composition API 형식으로 사용합니다. - 실행 시점: 각 Hook은 컴포넌트의 생명주기 단계에 맞춰 실행되어, 필요한 로직(예: AJAX 호출, 데이터 검증 등)을 삽입할 수 있습니다.
