프레임워크와 라이브러리/Vue
[Vue Lifecycle] Vue 컴포넌트의 일생을 따라가보자
Dachaes
2025. 4. 17. 11:52
728x90
728x90
Vue Lifecycle
Vue.js에서 컴포넌트는 생성(Creation) → 마운트(Mounting) → 업데이트(Updating) → 소멸(Unmounting)의 과정을 거칩니다. 이 각 단계마다 특정 라이프사이클 훅(Lifecycle Hook)이 호출되며, 컴포넌트의 상태나 DOM, 데이터를 조작할 수 있는 타이밍을 제공합니다.
이 글에서는 Vue 3 기준으로 주요 라이프사이클 훅과 사용 예제를 정리합니다.
1. 전체 라이프사이클 흐름 요약
┌────────────┐
│beforeCreate│
└────────────┘
↓
┌────────────┐
│ created │ ← 데이터 접근 가능
└────────────┘
↓
┌─────────────┐
│ beforeMount │
└─────────────┘
↓
┌─────────────┐
│ mounted │ ← DOM 접근 가능
└─────────────┘
↓
┌─────────────────────┐
│beforeUpdate(변경 전) │
└─────────────────────┘
↓
┌─────────────────┐
│updated (변경 후) │
└─────────────────┘
↓
┌───────────────┐
│ beforeUnmount │
└───────────────┘
↓
┌───────────────┐
│ unmounted │
└───────────────┘
2. 라이프사이클 훅 상세 설명
a. beforeCreate
- 인스턴스가 초기화되기 전 호출
- data, methods 등 접근 불가
beforeCreate() {
console.log('beforeCreate: 아직 데이터에 접근 불가');
}
b. created
- 인스턴스가 생성되고 data, methods 등 초기화 완료
- 비동기 데이터 호출하기 좋은 타이밍
created() {
console.log('created: 데이터 접근 가능', this.message);
}
c. beforeMount
- 가상 DOM을 만들고, 실제 DOM에 적용되기 전
d. mounted
- 컴포넌트가 DOM에 실제로 삽입된 후
- DOM API 조작, 외부 라이브러리 초기화에 적합
mounted() {
console.log('mounted: DOM 접근 가능');
this.$refs.input.focus();
}
e. beforeUpdate
- 반응형 데이터가 변경되어 DOM을 다시 그리기 직전
- 변경 전 상태를 확인하거나 로그 기록용
f. updated
- DOM이 업데이트된 후 호출
- 변경된 DOM에 후처리 작업 가능
updated() {
console.log('DOM이 업데이트되었습니다');
}
g. beforeUnmount
- 컴포넌트가 파괴되기 전
- 타이머/이벤트 리스너 해제 필요
h. unmounted
- 컴포넌트가 DOM에서 제거된 후
beforeUnmount() {
console.log('beforeUnmount: 정리 작업 수행');
clearInterval(this.timer);
}
3. Vue 3 Composition API에서의 사용
Composition API에서는 onMounted, onUpdated 등의 함수를 직접 import해서 사용합니다.
import { onMounted, onUnmounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('mounted!');
});
onUnmounted(() => {
console.log('unmounted!');
});
}
};
- setup() 안에서는 this 대신 Composition 함수를 활용해야 합니다.
4. 언제 어떤 훅을 써야 할까?
작업 목적 | 적절한 훅 |
비동기 API 호출 | created, setup |
DOM 요소에 접근 | mounted |
외부 라이브러리 초기화 (chart.js 등) | mounted |
상태 변경 시 반응 처리 | watch, updated |
타이머, 이벤트 정리 | beforeUnmount, onUnmounted |
5. 마무리
훅 | 설명 |
beforeCreate | 인스턴스 초기화 전 |
created | 데이터/메서드 초기화 완료 |
mounted | DOM 접근 가능 |
beforeUpdate / updated | 데이터 변경 → DOM 업데이트 전후 |
beforeUnmount / unmounted | 컴포넌트 소멸 전후, 정리작업 |
- Vue의 라이프사이클 훅을 잘 활용하면, 데이터 로딩 타이밍 최적화, 성능 개선, 정리작업 관리 등을 체계적으로 할 수 있습니다.
함께 보면 좋은 자료
블로그 글 :
[React Lifecycle] 컴포넌트는 언제 태어나고 사라질까?
React Lifecycle 리액트 컴포넌트를 사용하다 보면 "언제 데이터를 불러와야 할까?", "언제 정리(clean-up)를 해야 할까?" 같은 고민이 생깁니다. 이럴 때 중요한 개념이 바로 컴포넌트의 라이프사이클(Li
dachaes-devlogs.tistory.com
728x90