Vue.js 컴포넌트 + 생명주기 흐름도

1. 컴포넌트란?

컴포넌트 = 웹 페이지를 구성하는 독립적인 단위

Vue에서는 한 페이지를 여러 조각으로 나눌 수 있어요. 이 각 조각을 컴포넌트라고 부릅니다.

특징

• 재사용 가능: 버튼, 카드, 모달 등 여러 곳에서 같은 컴포넌트를 재활용할 수 있어요.
• 독립적 관리: 각 컴포넌트는 자기 데이터, 템플릿, 스타일을 가질 수 있어요.
• 트리(Tree) 구조로 연결됨

App.vue (부모)
 ├── Header.vue (자식)
 ├── Content.vue (자식)
 │   └── Card.vue (손자)
 └── Footer.vue (자식)

---

2. 컴포넌트의 부모-자식 관계

Vue 컴포넌트는 트리 구조로 연결돼 있어요.

즉, 하나의 컴포넌트가 다른 컴포넌트를 "포함"하면 그건 부모-자식 관계가 됩니다.

주의: 서로 연결되어 있을 때만 부모-자식 관계라고 부릅니다.

예를 들어 App.vue 안에서 Header.vue를 사용한다면, App이 부모, Header가 자식입니다.

---

3. 싱글 파일 컴포넌트 구조

Vue에서는 .vue 확장자의 파일을 통해 컴포넌트를 정의합니다.

이런 형식을 SFC(Single File Component)라고 해요.

<!-- MyComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "안녕하세요 Vue!"
    }
  }
}
</script>

<style scoped>
div {
  color: blue;
}
</style>

각 태그 영역 설명

태그	역할	필수 여부
<template>	UI 정의, HTML 구조 작성	✅ 필수
<script>	로직 정의 (데이터, 메서드, 생명주기)	⚪ 선택
<style>	CSS 스타일 정의	⚪ 선택

---

4. 컴포넌트의 생명주기(Lifecycle)

Vue 컴포넌트는 생성 → 화면 출력 → 데이터 변경 → 제거의 단계를 거칩니다.

이 일련의 과정을 "생명주기"라고 하며, 각 단계마다 Vue가 자동으로 특정 함수를 실행해줘요. 이를 라이프사이클 훅(hook)이라고 합니다.

🔁 라이프사이클 전체 흐름도

beforeCreate → created → beforeMount → mounted
→ (데이터 변경 시) beforeUpdate → updated
→ (제거 시) beforeUnmount → unmounted

각 훅의 의미

훅 이름	시점	주요 용도
beforeCreate	컴포넌트 초기화 전	데이터 접근 X
created	컴포넌트 초기화 후	API 요청, 데이터 접근 가능
beforeMount	DOM에 붙기 전	가상 DOM 준비됨
mounted	DOM에 실제로 붙은 직후	DOM 조작, 외부 라이브러리 연동
beforeUpdate	데이터 변경 후 DOM 반영 전	상태 확인 또는 정리
updated	데이터 변경 후 DOM 반영 완료	화면 변화 후 로직 실행
beforeUnmount	컴포넌트 제거 직전	타이머 제거, 이벤트 해제 등
unmounted	컴포넌트 제거 완료	리소스 정리 끝

---

마무리 요약

• Vue는 컴포넌트 기반 구조로, 각각이 독립적인 구성 단위
• 컴포넌트는 .vue 파일로 정의하며 <template>, <script>, <style> 세 영역으로 구성됨
• Vue 컴포넌트는 특정 흐름에 따라 생명주기 훅을 통해 생성되고 제거됨
• mounted, updated, unmounted 같은 훅은 데이터 조작, 타이머 설정/해제 등에 활용됨