⚙️ Vue 컴포넌트 라이프사이클 완전 정복

⚙️ Vue 컴포넌트 라이프사이클 완전 정복

Vue 기초 시리즈 > 3️⃣ Vue 작동 원리와 구조 이해 > 2️⃣ 컴포넌트 라이프사이클 정리

• 1. 라이프사이클이란?
• 2. 실행 흐름 요약
• 3. 주요 훅 설명 (created, mounted, updated 등)
• 4. 실무 사용 예시 및 팁
• 5. Composition API에서의 라이프사이클
• 🔚 마무리 & 다음 글 안내

---

1. 라이프사이클이란?

Vue 컴포넌트는 생성부터 소멸까지 일련의 단계를 거칩니다. 이때 각 단계마다 특정 훅(hook)이 존재하여 개발자가 필요한 로직을 삽입할 수 있도록 도와줍니다.

라이프사이클 훅 = 컴포넌트가 생성되거나 업데이트되거나 소멸될 때 실행되는 함수

2. 전체 실행 흐름

라이프사이클은 총 4단계로 나눌 수 있습니다.

• 🛠 Setup 단계: setup(), beforeCreate(), created()
• 🏗 마운트 단계: beforeMount(), mounted()
• 🔄 업데이트 단계: beforeUpdate(), updated()
• 🧹 소멸 단계: beforeUnmount(), unmounted()

라이프사이클 다이어그램

이미지출처: https://v2.ko.vuejs.org/v2/guide/instance.html

3. 주요 라이프사이클 훅 정리

훅 이름	단계		설명	활용 예시
created	생성	beforeCreate → created	컴포넌트 인스턴스가 생성되었고, data()와 methods에 접근 가능	초기 데이터 가공, API 호출 준비
mounted	마운트	beforeMount → mounted	DOM이 실제로 브라우저에 삽입된 직후 실행	DOM 접근, 타 라이브러리 초기화
updated	업데이트	beforeUpdate → updated	데이터가 변경되어 DOM이 업데이트된 후	DOM 갱신 후 특정 처리
unmounted	소멸	beforeUnmount → unmounted	컴포넌트가 DOM에서 제거되기 직전	타이머 제거, 이벤트 리스너 제거

4. 실무 팁 & 사용 예시

export default {
  data() {
    return { timer: null }
  },
  mounted() {
    this.timer = setInterval(() => {
      console.log("실행 중...");
    }, 1000);
  },
  beforeUnmount() {
    clearInterval(this.timer);
  }
}

• mounted: 외부 플러그인 연동 시 매우 중요 (예: chart, swiper 등)
• updated: 특정 prop이나 데이터 변경 후 대응할 로직 작성

5. Composition API에서의 라이프사이클

Composition API를 사용할 경우 별도의 훅 함수를 import해서 사용합니다.

import { onMounted, onBeforeUnmount } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("마운트 완료");
    });

    onBeforeUnmount(() => {
      console.log("소멸 전 정리");
    });
  }
};

🔚 마무리 & 다음 글 안내

Vue 컴포넌트의 생애 주기를 정확히 이해하면 더 예측 가능하고 효율적인 코드를 만들 수 있습니다.

👉 다음 글: 템플릿 렌더링과 DOM 업데이트의 흐름