프레임워크와 라이브러리/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