Vue 생명 주기(Lifecycle) 쉽게 이해하기

Vue 라이프사이클이란?

Vue는 웹사이트를 만들 때 "컴포넌트"라는 블록을 사용함
이 블록(컴포넌트)은 "탄생 → 성장 → 소멸" 과정을 거치는데, 이 과정을 'Vue 라이프사이클'이라고 한다.

Vue의 라이프사이클 단계

단계	Vue에서 하는 일	사람으로 비유
1. beforeCreate	데이터와 이벤트가 아직 준비 안 됨	아기가 태어나기 전 (배 속)
2. created	데이터와 이벤트 설정 완료	아기가 태어남 (이름,가족 등록 완료)
3. beforeMount	화면에 출력될 준비 완료	유치원 가기 직전 (준비 다 됨)
4. mounted	화면에 실제로 표시됨	유치원에서 친구들과 놈
5. beforeUpdate	데이터가 바뀌었지만 아직 화면에 반영 안 됨	시험 성적이 나왔지만 부모님이 아직 모름
6. updated	화면이 새로운 데이터로 바뀜	부모님이 성적표를 보고 반응함
7. beforeUnmount	컴포넌트가 곧 사라질 예정	졸업식 전날 (이별 준비)
8. unmounted	컴포넌트가 완전히 삭제됨	졸업하고 학교 떠남

예제 코드

<script>
export default {
  data() {
    return {
      message: "안녕하세요, Vue입니다!"
    };
  },
  beforeCreate() {
    console.log("🔥 beforeCreate - 데이터 아직 없음");
  },
  created() {
    console.log("✅ created - 데이터가 준비됨:", this.message);
  },
  beforeMount() {
    console.log("🛠 beforeMount - 화면에 아직 표시 안 됨");
  },
  mounted() {
    console.log("🎉 mounted - 화면에 표시됨!");
  },
  beforeUpdate() {
    console.log("🔄 beforeUpdate - 데이터가 바뀌었지만 아직 화면 반영 안 됨");
  },
  updated() {
    console.log("✅ updated - 화면이 변경됨!");
  },
  beforeUnmount() {
    console.log("⚠️ beforeUnmount - 곧 컴포넌트 삭제됨");
  },
  unmounted() {
    console.log("💀 unmounted - 컴포넌트 완전 삭제됨");
  }
};
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="message = '안녕, 새로운 Vue! 😊'">메시지 변경</button>
  </div>
</template>