Vue LifeCycle

🧩 Vue.js 라이프사이클 정리

Vue.js를 사용하면서 라이프사이클에 대해 한 번쯤 들어봤을 것이다.
하지만 막상 프로젝트를 하다 보면 언제 어떤 훅을 써야 할지 헷갈리기 쉽다.
이번 포스팅에서는 Vue 3 기준으로 라이프사이클을 정리하고,
각 훅이 실제로 언제 어떻게 호출되는지를 흐름 위주로 풀어봤다.

---

🔄 라이프사이클 훅이란?

Vue 컴포넌트는 생성부터 DOM에 부착되고, 데이터가 갱신되며
결국 소멸되기까지의 일련의 “생명 주기”를 거친다.
이 흐름 중간중간 개입할 수 있는 시점이 있으며,
이를 라이프사이클 훅 (Lifecycle Hooks) 이라고 부른다.

---

📊 라이프사이클 훅 전체 흐름

- lifecycle phases

beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount → unmounted

각 훅의 역할을 하나씩 정리해보자.

---

🧱 생성 단계

1. beforeCreate()

• 컴포넌트 인스턴스가 초기화되기 직전 호출

• data, props, methods에 접근 불가

흔히 쓸 일은 거의 없지만, 디버깅 용도로 유용할 때가 있다.

---

2. created()

• data, props, methods가 초기화된 후 호출

• API 호출, 초기 로직 설정에 많이 사용

created() {
  this.fetchInitialData()
}

---

🖼 마운트 단계

3. beforeMount()

• 가상 DOM이 준비되었지만, 실제 DOM에 부착되기 전 호출

• DOM 조작은 아직 불가

---

4. mounted()

• 컴포넌트가 실제 DOM에 렌더링된 이후 호출

• ref, 외부 라이브러리 연동 등에 활용

mounted() {
  this.initChart(this.$refs.chartContainer)
}

---

🔁 업데이트 단계

5. beforeUpdate()

• 반응형 데이터가 변경되어 DOM 업데이트가 일어나기 직전 호출

• 이전 상태를 기반으로 처리해야 할 로직이 있을 때 사용

---

6. updated()

• DOM 업데이트가 완료된 후 호출

• UI 후처리 작업, 애니메이션 처리 등에 유용

---

🧹 소멸 단계

7. beforeUnmount()

• 컴포넌트가 DOM에서 제거되기 직전 호출

• 타이머 정리, 이벤트 해제 등 정리 작업

---

8. unmounted()

• 컴포넌트가 완전히 소멸된 후 호출

• 정리 확인용으로 사용

---

⚠️ Composition API에서는?

Vue 3의 <script setup> 또는 Composition API를 사용하면 onMounted, onUpdated 같은
훅 함수를 사용할 수 있다.

<script setup>
import { onMounted } from 'vue'
 
onMounted(() => {
  console.log('컴포넌트 마운트 완료!')
})
</script>

---

💡 실제 사용 예시

• API 호출: created 또는 onMounted

• 차트, DOM 조작: mounted 또는 onMounted

• 타이머 해제: beforeUnmount

• 외부 리소스 해제: unmounted

---