컴포넌트 네이밍 및 설계

10.2.1. 파일명

대상	규칙	예시
컴포넌트 파일	PascalCase	UserProfile.vue
Composable 파일	camelCase, use 접두사	useUser.ts
Store 파일	camelCase, use 접두사	useUserStore.ts
유틸리티	camelCase	formatDate.ts
타입 정의	camelCase	user.ts

---

10.2.2. 컴포넌트 사용

템플릿에서 컴포넌트를 사용할 때는 PascalCase를 사용합니다.

<!-- 올바른 예 -->
<UserProfile :user="currentUser" />

<!-- 잘못된 예 -->
<user-profile :user="currentUser" />

---

10.2.3. Props 정의

• Props는 defineProps에 타입을 명시합니다.
• 기본값이 필요한 경우 withDefaults를 사용합니다.
• Props 이름은 camelCase로 정의합니다.

<script setup lang="ts">
interface Props {
  title: string
  count?: number
  items?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  count: 0,
  items: () => [],
})
</script>

---

10.2.4. Emits 정의

• Emits는 defineEmits에 이벤트 시그니처를 명시합니다.
• 이벤트 이름은 camelCase를 사용합니다.
• 페이로드 타입을 명확히 정의합니다.

<script setup lang="ts">
const emit = defineEmits<{
  update: [value: string]
  delete: [id: number]
  submit: [data: FormData]
}>()

function handleSubmit(data: FormData) {
  emit('submit', data)
}
</script>

---

10.2.5. 슬롯 패턴

• 기본 슬롯은 레이아웃 컴포넌트에 사용합니다.
• 이름 있는 슬롯(Named Slot)은 복합 레이아웃에 사용합니다.
• 범위 슬롯(Scoped Slot)은 데이터 위임 패턴에 사용합니다.

<!-- 레이아웃 컴포넌트 -->
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header" />
    </div>
    <div class="card-body">
      <slot />
    </div>
    <div class="card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>