[Vue.js] 라이프사이클 훅 (Lifecycle Hooks)

📗 Vue.js

[Vue.js] 라이프사이클 훅 (Lifecycle Hooks)

JaeBBang 2025. 4. 16. 16:27

포스팅 이전에 앞서

💡 Vue.js의 라이프사이클(Lifecycle)이란?

Vue 컴포넌트는 단순히 한 번 만들어지고 끝나는 게 아니라, 탄생부터 소멸까지 일련의 단계를 거칩니다.
이 과정을 컴포넌트 생명주기(Lifecycle)라고 부릅니다.

쉽게 말하면, 컴포넌트가
생성되고 (create), DOM에 붙고 (mount), 업데이트되고 (update), 사라지기까지 (unmount)

이 전체 흐름을 Vue가 내부적으로 관리하고 있으며, 가장 중요한 요소는
특정 시점마다 실행할 코드를 직접 작성할 수 있다는 것입니다.
이때 사용하는 게 바로! 라이프사이클 훅(Lifecycle Hooks) 입니다.

Vue 3에서는 컴포넌트의 생명주기 동안 특정 시점에 실행할 수 있는 라이프사이클 훅(Lifecycle Hooks)을 제공합니다.

예전 Vue 2에서는 created, mounted, destroyed 같은 옵션을 사용했지만,

Vue 3의 <script setup> 문법에서는 조금 다르게 사용합니다.

이번 글에서는 자주 쓰이는 훅들과, 실제 프로젝트에서 어떻게 활용하는지 간단한 예제와 함께 정리해보았습니다.

1. 기본 사용법

Vue에서 제공하는 vue 모듈에서 import해야 합니다.

<template>
  <div>라이프싸이클 예제</div>
</template>
<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log('## onMounted')
})
</script>

👨‍💻 실행결과

위와 같이 컴포넌트가 DOM에 완전히 마운트 될 때 호출되는 것을 확인할 수 있습니다.

2. 주요 라이프사이클 훅 정리

위에서는 onMounted에 대해서만 테스트를 해보았지만, 실제로는 자주 사용하는 라이프사이클 훅이 더 존재합니다.

onBeforeMount
- 컴포넌트가 DOM에 붙기 전에 호출됩니다.
onMounted
- 컴포넌트가 DOM에 완전히 마운트된 후 호출됩니다. DOM 조작이나 외부 라이브러리 연동에 자주 사용됩니다.
onBeforeUpdate
- 반응형 상태가 변경되어 DOM이 업데이트되기 직전에 호출됩니다.
onUpdated
- 반응형 상태 변경으로 인해 DOM이 업데이트된 직후에 호출됩니다.
onBeforeUnmount
- 컴포넌트가 DOM에서 제거되기 직전에 호출됩니다.
onUnmounted
- 컴포넌트가 완전히 언마운트된 후 호출됩니다. 이벤트 리스너 해제 같은 정리에 적합합니다.

App.vue

<template>
  <div>
    <button @click="showTest = !showTest">
      {{ showTest ? '컴포넌트 제거' : '컴포넌트 다시 보여주기' }}
    </button>

    <Body v-if="showTest" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Body from '../components/Body.vue'

const showTest = ref(true)
</script>

Body.vue

<template>
  <div>
    <h2>라이프사이클 테스트</h2>
    <p>카운트: {{ count }}</p>
    <button @click="count++">카운트 증가</button>
  </div>
</template>

<script setup>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

const count = ref(0)

// 🔵 컴포넌트가 아직 DOM에 붙기 전, setup() 다음 단계에서 호출됨
onBeforeMount(() => {
  console.log('🔵 onBeforeMount: DOM에 붙기 직전')
})

// 🟢 컴포넌트가 DOM에 완전히 마운트된 후 호출됨
// 이 시점엔 실제 HTML 요소에 접근가능
onMounted(() => {
  console.log('🟢 onMounted: DOM 마운트 완료')
})

// 🟡 반응형 상태(count 등)가 변경되어 DOM이 바뀌기 *바로 전*에 호출됨
// DOM이 바뀌기 직전의 상태를 확인하거나, 변경 직전 처리할 일이 있다면 여기에서 처리
onBeforeUpdate(() => {
  console.log('🟡 onBeforeUpdate: DOM 업데이트 직전')
})

// 🟠 반응형 상태가 바뀌고 실제 DOM까지 바뀐 후에 호출됨
// 변경된 DOM을 확인하거나 후처리할 때 사용됨
onUpdated(() => {
  console.log('🟠 onUpdated: DOM 업데이트 완료')
})

// 🔴 컴포넌트가 DOM에서 제거되기 직전 호출됨
// 제거 전에 리소스를 정리하거나 사용자 확인 모달 등을 띄울 수도 있음
onBeforeUnmount(() => {
  console.log('🔴 onBeforeUnmount: DOM 제거 직전')
})

// ⚫ 컴포넌트가 완전히 제거된 후 호출됨
// 이벤트 리스너 해제, 타이머 제거 등 메모리 누수를 방지하는 정리 작업에 적합
onUnmounted(() => {
  console.log('⚫ onUnmounted: DOM 제거 완료')
})
</script>

👨‍💻 실행결과

✅ 1. 화면이 렌더링(mount) 되었을 때

컴포넌트가 처음 생길 때 호출됩니다.

onBeforeMount, onMounted

✅ 2. 반응형 상태 등이 변경되어 화면이 업데이트될 때

카운트 클릭 시 ref 값(count)을 증가시킬 때 상태가 변경이 되면서 호출됩니다.

onBeforeUpdate, onUpdated

✅ 3. 컴포넌트가 제거(unmount) 될 때

부모 컴포넌트에서 v-if로 해당 컴포넌트를 제거할 때 호출됩니다.

onBeforeUnmount, onUnmounted

이 외에도 아래와 같은 라이프사이클도 있으니 참고해주세요 !

onActivated
- <keep-alive>로 감싼 컴포넌트가 활성화될 때 호출됩니다.
onDeactivated
- <keep-alive>로 감싼 컴포넌트가 비활성화될 때 호출됩니다.
onErrorCaptured
- 하위 컴포넌트에서 오류가 발생했을 때 호출됩니다.
onRenderTracked
- 반응형 렌더링 시 어떤 값이 추적됐는지 디버깅용으로 확인할 수 있습니다.
onRenderTriggered
- 어떤 반응형 값이 변경되어 렌더링이 트리거되었는지 추적할 수 있습니다.

3. Pinia를 사용한 예제

Pinia로 관리하는 스토어의 상태 변화를 감지하고, 컴포넌트가 마운트될 때 초기 데이터를 불러오는 구조를 생각해볼 수 있습니다.

<script setup>
import { onMounted } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

onMounted(async () => {
  await userStore.fetchUserData()
  console.log('사용자 정보 불러오기 완료!')
})
</script>

onMounted 안에서 비동기로 데이터를 불러오면, 컴포넌트가 화면에 나타날 때 사용자 정보를 초기화할 수 있습니다.

Vue 3의 라이프사이클 훅은 생각보다 간단하고 직관적입니다.

개인적으로는 onMounted에서 초기 데이터를 불러오는 패턴을 용이하게 자주 쓰고 있습니다. 😎