Vue.js 라이프사이클: Composition API 훅으로 보는 컴포넌트의 일생

Vue.js(뷰) 라이프사이클은 컴포넌트가 생성되어 DOM에 연결되고, 데이터 변화에 따라 갱신되다가, 화면에서 제거되기까지의 전체 과정을 뜻한다. Vue 3의 Composition API(컴포지션 API)는 이 과정의 각 시점에 onMounted, onUpdated, onUnmounted 같은 훅 함수를 등록해 부수 작업을 실행할 수 있게 한다. 라이프사이클을 정확히 이해하면 데이터 요청, DOM 접근, 자원 정리를 각각 올바른 시점에 배치할 수 있다.

라이프사이클의 네 단계

컴포넌트의 일생은 크게 생성(creation), 마운트(mount), 갱신(update), 소멸(unmount)의 네 단계로 나뉜다. 생성 단계에서는 컴포넌트 인스턴스가 만들어지고 반응형 상태가 준비된다. 마운트 단계에서는 템플릿이 렌더 함수로 실행되어 가상 DOM(virtual DOM)이 만들어지고 실제 DOM에 삽입된다. 갱신 단계는 반응형 의존성이 변할 때마다 반복되며, 새 가상 DOM과 이전 결과를 비교해 달라진 부분만 실제 DOM에 반영한다. 소멸 단계에서는 컴포넌트가 DOM에서 제거되면서 감시자(watcher), 이벤트 리스너, 자식 컴포넌트가 함께 정리된다.

Composition API의 라이프사이클 훅

Composition API에서는 script setup 블록 또는 setup 함수의 실행 자체가 생성 단계다. 그래서 Options API(옵션스 API)의 beforeCreate와 created에 해당하는 훅은 따로 존재하지 않고, 그 자리에서 하던 초기화 코드는 setup 본문에 그대로 쓰면 된다. 이후 시점은 다음 함수들로 등록한다.

• onBeforeMount, onMounted: DOM 삽입 직전과 직후에 호출된다. DOM 접근이 필요한 작업은 onMounted 이후에만 안전하다.
• onBeforeUpdate, onUpdated: 반응형 변화로 인한 재렌더링 직전과 직후에 호출된다.
• onBeforeUnmount, onUnmounted: 컴포넌트 제거 직전과 직후에 호출되며 자원 정리를 담당한다.
• onActivated, onDeactivated: keep-alive로 캐시된 컴포넌트가 화면에 나타나고 사라질 때 호출된다.
• onErrorCaptured: 자식 컴포넌트에서 전파된 오류를 가로챌 때 쓴다.

Options API와의 대응 관계

Vue 2 시절부터 쓰이던 Options API의 라이프사이클 옵션은 Composition API 훅과 다음처럼 대응한다. Vue 3에서 beforeDestroy와 destroyed가 beforeUnmount와 unmounted로 이름이 바뀐 점도 함께 기억해 두면 좋다.

Options API	Composition API	시점
beforeCreate, created	setup 본문	인스턴스 생성과 상태 초기화
beforeMount	onBeforeMount	DOM 삽입 직전
mounted	onMounted	DOM 삽입 직후
beforeUpdate	onBeforeUpdate	재렌더링 직전
updated	onUpdated	재렌더링 직후
beforeUnmount	onBeforeUnmount	제거 직전
unmounted	onUnmounted	제거 직후

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const items = ref([]);
let timer = null;

async function refresh() {
  const res = await fetch('/api/items');
  items.value = await res.json();
}

onMounted(() => {
  refresh();
  timer = setInterval(refresh, 5000);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>