[Vue.js] Vue 생명주기

펻 컴포넌트는 생성되고, DOM에 부착되고, 업데이트 되며, 결국 소멸한다. 이 일렬의 과정을 생명주기라고하며, 각 단계에서 특정 함수를 실행할 수 있는 라이프사이클 훅이 존재한다.

 

1. Vue 생명주기

1. 생성 단계 (Creation)
2. 마운트 단계 (Mounting)
3. 업데이트 단계 (Updating)
4. 소멸 단계 (Unmounting)

2. 생명주기 전체 흐름 (Vue 2 기준)

beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount → unmounted

생명주기 단계 요약:

beforeCreate	인스턴스 초기화 전, data와 methods 접근 불가
created	인스턴스 초기화 완료, data, props 접근 가능
beforeMount	DOM에 렌더링되기 직전
mounted	DOM 렌더링 완료, 엘리먼트 접근 가능
beforeUpdate	반응형 데이터 변경 시 DOM 업데이트 전
updated	DOM 업데이트 후
beforeUnmount	컴포넌트가 DOM에서 제거되기 직전
unmounted	컴포넌트가 제거된 후

3. Options API에서의 사용법

export default {
  data() {
    return { count: 0 };
  },
  created() {
    console.log('컴포넌트 생성됨!');
  },
  mounted() {
    console.log('DOM에 마운트됨!');
  },
  updated() {
    console.log('업데이트됨!');
  },
  unmounted() {
    console.log('컴포넌트가 제거됨!');
  }
};

• Vue 2 & 3 모두에서 사용 가능.
• 각 훅은 this를 통해 컴포넌트 내부 상태에 접근할 수 있음.

4. Composition API에서의 사용법

Vue 3의 Composition API에서는 생명주기 훅들을 함수 형태로 사용한다.

예시:

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

onMounted(() => {
  console.log('마운트 완료!');
});

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

onUnmounted(() => {
  console.log('언마운트 완료!');
});
</script>

 

 

5. 생명주기 훅 목록 (Composition API 기준)

onBeforeMount	컴포넌트가 DOM에 붙기 전
onMounted	DOM 마운트 완료 후
onBeforeUpdate	DOM이 업데이트되기 직전
onUpdated	DOM 업데이트 완료 후
onBeforeUnmount	컴포넌트 제거 직전
onUnmounted	컴포넌트 제거 후

⚠️ onBeforeCreate, onCreated는 Composition API에서는 따로 제공되지 않으며, setup() 자체가 그 역할을 수행한다.