Vue.js 라이프 사이클(Life Cycle)

✅ Vue.js 라이프사이클(Lifecycle) 개요

Vue.js의 라이프사이클은 컴포넌트가 생성되고, DOM에 마운트되며, 갱신 및 소멸되는 과정을 의미합니다.

라이프사이클 훅(Lifecycle Hooks)을 사용하면 특정 단계에서 코드를 실행할 수 있으며, 이를 통해 비동기 데이터 가져오기, 이벤트 리스너 등록, DOM 조작 등을 할 수 있습니다.

---

🔥 Vue 3 라이프사이클 훅 전체 흐름

🔹 1. 생성 단계 (Creation)

• setup() (Composition API 사용 시)
• beforeCreate() (Composition API 사용 시 생략 가능)
• created() (Composition API 사용 시 생략 가능)

🔹 2. 마운트 단계 (Mounting)

• beforeMount()
• mounted() ✅ DOM이 렌더링된 후 실행됨

🔹 3. 업데이트 단계 (Updating)

• beforeUpdate() (DOM이 변경되기 직전)
• updated() (DOM이 변경된 후 실행됨)

🔹 4. 소멸 단계 (Unmounting)

• beforeUnmount()
• unmounted() ✅ 컴포넌트가 제거된 후 실행됨

---

🎯 Vue 3 라이프사이클 상세 설명

🟢 1. 생성 단계 (Creation)

컴포넌트가 메모리에 로드되는 단계 (DOM에 접근할 수 없음)

훅	설명
setup()	Composition API 사용 시 실행됨 (beforeCreate 및 created 대신 사용)
beforeCreate()	컴포넌트가 초기화되기 전 (data, props 접근 불가)
created()	data, computed, methods 사용 가능하지만 DOM 접근 불가

📌 Example:

<script setup>
console.log("setup() 실행됨");
</script>

<script>
export default {
  beforeCreate() {
    console.log("beforeCreate() 실행됨");
  },
  created() {
    console.log("created() 실행됨");
  }
};
</script>

✅ 실행 순서:

setup() 실행됨
beforeCreate() 실행됨
created() 실행됨

---

🔵 2. 마운트 단계 (Mounting)

템플릿이 가상 DOM에서 실제 DOM으로 렌더링되는 단계

훅	설명
beforeMount()	가상 DOM이 준비되었지만, 실제 DOM에는 아직 반영되지 않음
mounted() ✅	컴포넌트가 DOM에 삽입된 후 실행됨 (DOM 접근 가능)

📌 Example:

<script>
export default {
  beforeMount() {
    console.log("beforeMount() 실행됨");
  },
  mounted() {
    console.log("mounted() 실행됨");
  }
};
</script>

✅ 실행 순서:

beforeMount() 실행됨
mounted() 실행됨

🚀 mounted()에서 API 호출, 이벤트 리스너 등록 등을 수행하는 것이 일반적.

---

🟠 3. 업데이트 단계 (Updating)

컴포넌트의 반응형 데이터가 변경될 때 실행됨

훅	설명
beforeUpdate()	데이터 변경 → DOM이 업데이트되기 직전
updated()	데이터 변경 → DOM이 업데이트된 후

📌 Example:

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">증가</button>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 };
  },
  beforeUpdate() {
    console.log(`beforeUpdate(): count가 곧 ${this.count + 1}로 변경됨`);
  },
  updated() {
    console.log(`updated(): count가 ${this.count}로 변경됨`);
  }
};
</script>

✅ 실행 순서 (버튼 클릭 시):

beforeUpdate(): count가 곧 1로 변경됨
updated(): count가 1로 변경됨

---

🔴 4. 소멸 단계 (Unmounting)

컴포넌트가 DOM에서 제거될 때 실행됨 (메모리 정리 필수!)

훅	설명
beforeUnmount()	컴포넌트가 제거되기 직전
unmounted() ✅	컴포넌트가 제거된 후 실행됨 (이벤트 리스너 해제 등)

📌 Example:

<template>
  <div v-if="isVisible">
    <p>이 컴포넌트는 곧 사라집니다!</p>
    <button @click="isVisible = false">숨기기</button>
  </div>
</template>

<script>
export default {
  data() {
    return { isVisible: true };
  },
  beforeUnmount() {
    console.log("beforeUnmount() 실행됨 - 컴포넌트가 곧 제거됨");
  },
  unmounted() {
    console.log("unmounted() 실행됨 - 컴포넌트가 제거됨");
  }
};
</script>

✅ 버튼 클릭 시 실행 순서:

beforeUnmount() 실행됨 - 컴포넌트가 곧 제거됨
unmounted() 실행됨 - 컴포넌트가 제거됨

🚀 unmounted()에서 이벤트 리스너 제거, 타이머 해제 등 메모리 정리를 수행해야 함.

---

⚡ Vue 3 라이프사이클 훅 정리

단계	라이프사이클 훅	설명
생성	setup()	Composition API 사용 시
	beforeCreate()	초기화 전 (data 접근 불가)
	created()	초기화 후 (data 접근 가능, DOM 접근 불가)
마운트	beforeMount()	가상 DOM 준비 완료 (아직 실제 DOM X)
	mounted()	실제 DOM 렌더링 완료 (DOM 조작 가능)
업데이트	beforeUpdate()	데이터 변경 → DOM 업데이트 전
	updated()	데이터 변경 → DOM 업데이트 후
소멸	beforeUnmount()	컴포넌트 제거 직전
	unmounted()	컴포넌트 제거 완료 (이벤트 해제 필수)

---

🎯 결론

1️⃣ setup()은 Composition API에서 가장 먼저 실행됨.
2️⃣ mounted()에서 API 호출 및 DOM 조작을 수행하는 것이 일반적.
3️⃣ updated()에서 DOM 변경 후 작업을 수행할 수 있음.
4️⃣ unmounted()에서 이벤트 리스너 해제, 타이머 제거 등 메모리 정리 필요.

💡 Vue 라이프사이클을 활용하면 효율적인 컴포넌트 관리를 할 수 있음! 🚀