Vue 3 – 컴포넌트 라이프사이클과 훅 정리

Vue 컴포넌트는 생성부터 제거까지 일정한 흐름을 따라 동작한다. 이 흐름을 라이프사이클(Lifecycle)이라고 하며, 이 흐름의 특정 시점에 맞춰 코드를 실행할 수 있도록 제공되는 함수가 라이프사이클 훅(hook)이다.

Composition API에서는 setup() 함수 안에서 훅을 호출해 원하는 타이밍에 동작을 지정할 수 있다.

 

라이프사이클 훅 사용 예시

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('컴포넌트가 마운트되었습니다.');
    });
  }
};

---

Composition API 기준 라이프사이클 정리

Options API                                                                            Composition API (setup)

beforeCreate	생략 (setup이 대체)
created	생략 (setup이 대체)
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
activated	onActivated
deactivated	onDeactivated
serverPrefetch	onServerPrefetch

---

1. Creation 단계

setup()

• 컴포넌트 인스턴스 생성 시 가장 먼저 실행됨
• props, emit 등을 사용할 수 있음

export default {
  setup() {
    console.log('setup 실행됨');
  }
}

Options API의 beforeCreate, created 훅은 Composition API에서는 setup()으로 대체된다.

---

2. Mounting 단계

컴포넌트가 DOM에 삽입되는 시점이다.

onBeforeMount()

• DOM에 삽입되기 직전 호출됨
• 대부분의 경우 사용 빈도는 낮음

onMounted()

• 컴포넌트가 실제 DOM에 마운트된 후 호출됨
• DOM 접근 가능
• 자식 컴포넌트까지 모두 마운트 완료된 상태

import { onMounted } from 'vue';

onMounted(() => {
  console.log('DOM 접근 가능');
});

---

3. Updating 단계

반응형 상태가 변경되어 DOM이 갱신될 때 실행된다. (재랜더링)

onBeforeUpdate()

• DOM 업데이트 직전에 호출됨

onUpdated()

• DOM 업데이트가 완료된 후 호출됨

import { onUpdated } from 'vue';

onUpdated(() => {
  console.log('업데이트 완료 후 실행');
});

❗ onUpdated 훅 내부에서 상태를 변경하면 무한 루프가 발생할 수 있으니 주의해야 한다.

 

---

4. Destruction 단계

컴포넌트가 제거되기 직전과 직후에 실행된다.

예: v-if 로 visable

onBeforeUnmount()

• 컴포넌트가 제거되기 직전에 실행됨

onUnmounted()

• 실제로 DOM에서 제거된 후 실행됨

import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('컴포넌트 해제됨');
});

---

5. 기타 훅

Vue에서는 보다 세부적인 상황에도 대응할 수 있도록 다양한 훅을 제공한다.

 

Hook 이름	설명
onErrorCaptured	하위 컴포넌트 에러 포착 시
onRenderTracked	렌더링 의존 추적 시
onRenderTriggered	렌더링 트리거 발생 시
onActivated	<KeepAlive> 컴포넌트 활성화 시
onDeactivated	<KeepAlive> 컴포넌트 비활성화 시
onServerPrefetch	서버 렌더링 시 데이터 prefetch

---

라이프사이클 흐름 요약

1. Creation (생성)
   • setup() 실행
   • 초기 데이터 세팅
2. Mounting (마운트)
   • onBeforeMount()
   • onMounted()
3. Updating (업데이트)
   • onBeforeUpdate()
   • onUpdated()
4. Destruction (소멸)
   • onBeforeUnmount()
   • onUnmounted()

---

정리

훅	사용 시점	특징
setup()	컴포넌트 시작 시	가장 먼저 실행됨
onMounted()	DOM 마운트 완료 후	자식 포함 마운트 완료
onUpdated()	DOM 업데이트 후	상태 변경 반영 완료 시점
onUnmounted()	컴포넌트 제거 후	정리 작업에 유용
onErrorCaptured()	자식 에러 발생 시	에러 핸들링 가능

Composition API에서는 모든 라이프사이클 훅을 setup() 안에서 동기적으로 등록해야 한다.

---

라이프사이클 훅은 언제 어떤 타이밍에 어떤 동작을 해야 할지 명확히 정리하는 데 큰 도움이 된다.

특히 외부 API 호출, DOM 접근, 정리 작업 등을 할 때 적절한 훅을 사용하는 게 중요하다.