1. 컴포넌트란?

재사용 가능한 UI 조각.
예를 들어 버튼, 카드, 사용자 목록 등

---

2. 컴포넌트 등록

• 전역 등록: 모든 컴포넌트에서 사용 가능
• 지역 등록: 특정 컴포넌트 내부에서만 사용 가능

2.1 지역 등록 (가장 일반적인 방법)

특정 컴포넌트에서 컴포넌트를 직접 import 하여 사용하는 방법

MyButton.vue

<template>
  <button>클릭해 주세요</button>
</template>
<script setup>
</script>

App.vue

<script setup>
import MyButton from './components/MyButton.vue' // 컴포넌트 임포트
</script>

<template>
  <div>
    <MyButton /> <!--컴포넌트 사용-->
  </div>
</template>

2.2 전역 등록

보통 src/main.js에서 앱 초기화할 때 등록한다.
여러 인스턴스에서 공통으로 사용할 수 있는 컴포넌트, 임포트 하지 않아도 사용 가능하다.
전역으로 등록하는 경우 컴포넌트를 사용하지 않아도 빌드되는 패키지에 포함되어 사용자에게 배포될 코드의 크기만 증가시키기 때문에 전역보다는 지역으로 쓰는게 좋다.
main.js

import { createApp } from 'vue'
import App from './App.vue'
import MyButton from './components/MyButton.vue'

const app = createApp(App)
app.component('MyButton', MyButton)
app.mount('#app')

---

3. 컴포넌트 이름 규칙

Vue는 자동으로 MyButton ↔︎ my-button을 변환해 인식한다.

• 컴포넌트 파일 이름 : MyButton.vue
• 태그로 쓸 때: <MyButton /> 또는 <my-button />

---

4. 컴포넌트끼리의 통신

컴포넌트 통신 기본 구조

방향	방식	설명
부모 ➡ 자식	props	부모가 자식에게 데이터를 넘김
자식 ➡ 부모	$emit	자식이 부모에게 이벤트를 보냄

4.1 props: 부모 → 자식으로 데이터 전달

부모 컴포넌트

<script setup>
// 자식 컴포넌트를 불러옴 (import)
import ChildComponent from './components/ChildComponent.vue' 
const parentMessage = '메시지입니다'
</script>
<template>
   <!-- 불러온 자식 컴포넌트를 실제로 화면에 씀 -->
  <ChildComponent :message="parentMessage" />
</template>

ChildComponent.vue

<script setup>
defineProps({
  message: String
})
</script>
<template>
  <p>자식이 받은 메시지: {{ message }}</p>
</template>

4.1.1 데이터 흐름 순서

[1] 부모가 변수 생성
const parentMessage = '메시지입니다'

↓ props를 통해 전달

[2] 부모가 자식 컴포넌트를 호출하면서 넘김
<ChildComponent :message="parentMessage" />

↓ defineProps로 받음

[3] 자식이 defineProps로 받음
defineProps({ message: String })

↓ 템플릿에 출력

[4] 자식이 {{ message }}로 출력
<p>자식이 받은 메시지: 메시지입니다</p>

4.2 emit: 자식 → 부모로 이벤트 보내기

부모 컴포넌트

<script setup>
// 자식 컴포넌트를 불러옴 (import)
import ChildComponent from './components/ChildComponent.vue'

// 자식이 이벤트를 보냈을 때 처리할 콜백 함수
function handleSend(payload) {
  console.log('자식이 보낸 값:', payload)
}
</script>
<template>
  // 자식이 send 이벤트를 emit하면 handleSend 함수 실행
  <ChildComponent @send="handleSend" />
</template>

ChildComponent.vue

<script setup>
// 부모에게 이벤트를 보낼 때 사용하는 함수
const emit = defineEmits(['send'])
// 부모에게 'send' 이벤트와 문자열 전달 
function sendToParent() {
  emit('send', '안녕하세요 부모님!')
}
</script>
<template>
  // 버튼을 클릭하면 sendToParent 함수 실행
  <button @click="sendToParent">부모에게 보내기</button>
</template>

4.2.1 데이터 흐름 순서

[1] 부모가 자식 컴포넌트를 사용하면서 이벤트 리스너 등록
<ChildComponent @send="handleSend" />

↓ 자식이 이벤트를 emit하면 실행될 함수 정의

[2] 부모가 콜백 함수 준비
function handleSend(payload) {
  console.log('자식이 보낸 값:', payload)
}

↓ defineEmits로 자식이 보낼 이벤트 정의

[3] 자식 컴포넌트에서 이벤트 선언
const emit = defineEmits(['send'])

↓ 특정 동작(예: 버튼 클릭) 시 emit으로 이벤트 발신

[4] 자식이 이벤트 발생시킴
emit('send', '안녕하세요 부모님!')

↓ 부모가 이벤트를 수신하고 콜백 실행

[5] 부모의 handleSend 함수가 실행됨
→ payload 값: '안녕하세요 부모님!'

→ 콘솔 출력: 자식이 보낸 값: 안녕하세요 부모님!