Vue Lifecycle

---

🔄 Vue LifeCycle이란?

정의

Vue LifeCycle은 컴포넌트가 생성되고, 화면에 올라가고, 업데이트되고, 제거되는 과정이다.

Vue에서는 이 시점에 맞춰 Lifecycle Hook을 사용해 작업을 수행할 수 있다.

🧩 주요 단계

• beforeCreate : 인스턴스가 초기화되기 직전
• created : 인스턴스 생성 후
• beforeMount : DOM에 마운트되기 직전
• mounted : DOM에 마운트된 후
• beforeUpdate : 상태 변경 후 DOM 반영 전
• updated : DOM 반영 후
• beforeUnmount : 컴포넌트 제거 전
• unmounted : 컴포넌트 제거 후

⚙️ 자주 쓰는 훅

• onMounted
• onUpdated
• onBeforeUnmount
• onUnmounted

🛠️ Composition API 예시

import { onMounted, onUnmounted, ref } from "vue";

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log("mounted");
    });

    onUnmounted(() => {
      console.log("unmounted");
    });

    return {
      count,
    };
  },
};

🧪 사용 예시

• API 요청은 onMounted에서 자주 처리한다.
• 이벤트 리스너 등록은 onMounted, 해제는 onUnmounted에서 처리한다.
• DOM이 필요하면 mounted 이후에 접근한다.

import { onMounted, onUnmounted } from "vue";

onMounted(() => {
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});

⚠️ 주의점

• DOM이 준비되기 전에 화면 요소에 접근하면 안 된다.
• 이벤트 등록 후 해제를 빼먹지 않는다.
• 업데이트 시점에 무거운 작업을 반복하지 않도록 주의한다.

📌 정리

• Vue LifeCycle은 컴포넌트의 생성과 소멸 흐름을 이해하는 개념이다.
• Composition API에서는 onMounted, onUnmounted를 자주 쓴다.
• Vue-Component, Vue-Directive, Vue-Template Syntax와 함께 보면 이해가 쉽다.

---

연결문서

• Vue-Component
• Vue-Directive
• Vue-Template Syntax
• Vuejs