Vue 3 Composition API

# Vue 3 Composition API 가이드

## 학습 목표
Vue 3의 Composition API로 재사용 가능한 컴포넌트를 만듭니다.

## 1. Vue 3란?
프로그레시브 JavaScript 프레임워크입니다.
- Composition API 도입
- 더 나은 TypeScript 지원
- 향상된 성능
- 더 작은 번들 크기

## 2. 프로젝트 생성
npm create vue@latest myapp
cd myapp
npm install
npm run dev

## 3. Composition API 기초
Options API (기존):
export default {
data() {
return { count: 0 }
},
methods: {
increment() { this.count++ }
}
}

Composition API (새로운):
import { ref } from "vue"

export default {
setup() {
const count = ref(0)
const increment = () => count.value++
return { count, increment }
}
}

script setup (권장):
<script setup>
import { ref } from "vue"
const count = ref(0)
const increment = () => count.value++
</script>

## 4. ref와 reactive
ref - 단일 값:
const count = ref(0)
const name = ref("Kim")
console.log(count.value)
count.value++

reactive - 객체:
const state = reactive({
name: "Kim",
age: 25
})
console.log(state.name)
state.age++

차이점:
- ref는 .value 필요
- reactive는 객체 전체를 반응형으로
- ref가 더 명시적이라 권장

## 5. computed
import { ref, computed } from "vue"

const firstName = ref("John")
const lastName = ref("Doe")

const fullName = computed(() => {
return firstName.value + " " + lastName.value
})

쓰기 가능한 computed:
const fullName = computed({
get() {
return firstName.value + " " + lastName.value
},
set(newValue) {
[firstName.value, lastName.value] = newValue.split(" ")
}
})

## 6. watch와 watchEffect
watch - 특정 소스 감시:
watch(count, (newVal, oldVal) => {
console.log("changed", newVal, oldVal)
})

watch(() => state.name, (newVal) => {
console.log("name changed", newVal)
})

watch([firstName, lastName], ([newFirst, newLast]) => {
console.log("changed", newFirst, newLast)
})

watchEffect - 자동 의존성 추적:
watchEffect(() => {
console.log("count is", count.value)
})

## 7. 라이프사이클 훅
import { onMounted, onUnmounted, onUpdated } from "vue"

onMounted(() => {
console.log("mounted")
fetchData()
})

onUnmounted(() => {
console.log("unmounted")
cleanup()
})

onUpdated(() => {
console.log("updated")
})

## 8. Props와 Emit
Props 받기:
<script setup>
const props = defineProps({
title: String,
count: { type: Number, default: 0 }
})
</script>

Emit 보내기:
<script setup>
const emit = defineEmits(["update", "delete"])

const handleClick = () => {
emit("update", { id: 1 })
}
</script>

## 9. provide/inject
부모:
import { provide } from "vue"
const theme = ref("dark")
provide("theme", theme)

자식/손자:
import { inject } from "vue"
const theme = inject("theme")
const theme = inject("theme", "light") // 기본값

## 10. Composables (재사용 로직)
composables/useFetch.js:
import { ref } from "vue"

export function useFetch(url) {
const data = ref(null)
const error = ref(null)
const loading = ref(true)

fetch(url)
.then(res => res.json())
.then(json => data.value = json)
.catch(err => error.value = err)
.finally(() => loading.value = false)

return { data, error, loading }
}

사용:
<script setup>
import { useFetch } from "@/composables/useFetch"
const { data, loading } = useFetch("/api/users")
</script>

## 11. Vue Router
npm install vue-router@4

import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
history: createWebHistory(),
routes: [
{ path: "/", component: Home },
{ path: "/about", component: About },
{ path: "/user/:id", component: User }
]
})

컴포넌트에서:
import { useRouter, useRoute } from "vue-router"
const router = useRouter()
const route = useRoute()

router.push("/about")
console.log(route.params.id)

## 12. Pinia 상태관리
npm install pinia

stores/counter.js:
import { defineStore } from "pinia"

export const useCounterStore = defineStore("counter", {
state: () => ({ count: 0 }),
getters: {
double: (state) => state.count * 2
},
actions: {
increment() { this.count++ }
}
})

사용:
<script setup>
import { useCounterStore } from "@/stores/counter"
const counter = useCounterStore()
counter.increment()
</script>

## 추천 학습 순서
1. ref와 reactive 이해
2. computed와 watch
3. Composables 패턴
4. Vue Router
5. Pinia 상태관리