[G1-Sync] Manual knowledge update

10_Wiki/Topics/Backend/Composition_API.md

@@ -1,25 +1,143 @@
 ---
 id: wiki-20260508-composition-api-redir
 title: Composition API
-category: Backend
-status: merged
-redirect_to: Composition API
-canonical_id: Composition API
-aliases: []
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [Vue Composition API, setup()]
 duplicate_of: none
 source_trust_level: A
-confidence_score: 0.92
-tags: [redirect]
+confidence_score: 0.95
+verification_status: applied
+tags: [vue, reactivity, frontend]
 raw_sources: []
-last_reinforced: 2026-05-08
+last_reinforced: 2026-05-10
 github_commit: pending
-inferred_by: Claude Opus 4.7 (auto-merge 2026-05-08)
+tech_stack:
+  language: TypeScript
+  framework: Vue 3
 ---
 
 # Composition API
 
-> [!IMPORTANT]
-> 이 문서는 P-Reinforce Phase 2 자동 MERGE에 의해 **[[Composition API]]**로 통합되었습니다.
+## 매 한 줄
+> **"매 logic-by-feature, not-by-option"**. 매 Vue 2 의 Options API (data/computed/methods 의 monolithic blob) 의 limitation 매 large component 의 reuse 의 difficulty → 매 Vue 3 (2020) 의 setup-function-based, ref/reactive primitive, custom-composables 의 pattern.
 
----
-*Redirected to: [[Composition API]]*
+## 매 핵심
+
+### 매 primitives
+- `ref<T>(initial)` — 매 single value reactive container, `.value` access.
+- `reactive<T>(obj)` — 매 deep proxy 의 object.
+- `computed(() => ...)` — 매 lazy + cached derived.
+- `watch(source, cb)` — 매 reactive side-effect.
+- `watchEffect(cb)` — 매 auto-track dependencies.
+
+### 매 modern (Vue 3.4+ / 2026)
+- `<script setup>` SFC syntax (default in Vue 3.2+).
+- `defineProps`, `defineEmits`, `defineExpose`, `defineModel` (3.4).
+- Reactivity Transform 매 deprecated → 매 macros 의 explicit `.value`.
+
+### 매 응용
+1. Custom composables (replace mixins).
+2. Cross-component state via VueUse / Pinia.
+3. Type-safe props/emits via `defineProps<T>()`.
+
+## 💻 패턴
+
+### `<script setup>` baseline
+```vue
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+const count = ref(0);
+const double = computed(() => count.value * 2);
+const inc = () => count.value++;
+</script>
+
+<template>
+  <button @click="inc">{{ count }} (×2 = {{ double }})</button>
+</template>
+```
+
+### Custom composable
+```ts
+// useCounter.ts
+import { ref, computed } from 'vue';
+
+export function useCounter(initial = 0, step = 1) {
+  const count = ref(initial);
+  const double = computed(() => count.value * 2);
+  const inc = () => (count.value += step);
+  const reset = () => (count.value = initial);
+  return { count, double, inc, reset };
+}
+```
+
+### Async data with `useFetch` (VueUse)
+```ts
+import { useFetch } from '@vueuse/core';
+const { data, error, isFetching } = useFetch<User[]>('/api/users').json();
+```
+
+### `defineModel` (Vue 3.4)
+```vue
+<script setup lang="ts">
+const model = defineModel<string>({ required: true });
+</script>
+<template>
+  <input v-model="model" />
+</template>
+```
+
+### `watch` + `watchEffect`
+```ts
+import { watch, watchEffect } from 'vue';
+watch(count, (v, old) => console.log('count', old, '→', v));
+watchEffect(() => console.log('auto-tracks', count.value));
+```
+
+### Provide/Inject typed
+```ts
+// parent
+import { provide } from 'vue';
+import type { InjectionKey } from 'vue';
+const ThemeKey: InjectionKey<Ref<'light' | 'dark'>> = Symbol();
+provide(ThemeKey, theme);
+
+// child
+import { inject } from 'vue';
+const theme = inject(ThemeKey, ref('light'));
+```
+
+## 매 결정 기준
+| 상황 | API |
+|---|---|
+| Vue 2 legacy | Options API |
+| Vue 3 new code | Composition API + `<script setup>` |
+| Cross-component state | Pinia (composition-style) |
+
+**기본값**: `<script setup>` + composables + Pinia.
+
+## 🔗 Graph
+- 부모: [[Vue]]
+- 변형: [[Options-API]] · [[Reactivity-Transform]]
+- 응용: [[VueUse]] · [[Pinia]]
+- Adjacent: [[React-Hooks]] · [[Solid-Signals]]
+
+## 🤖 LLM 활용
+**언제**: Vue 3+ component logic, reusable stateful logic, TS-first SFCs.
+**언제 X**: Vue 2 codebase 매 still on Options API; team unfamiliar with reactivity primitives.
+
+## ❌ 안티패턴
+- **Forgetting `.value` on refs**: 매 silently broken reactivity.
+- **Destructuring `reactive()` 의 result**: 매 loses reactivity (use `toRefs`).
+- **Mega-`setup()`**: 매 extract composables.
+
+## 🧪 검증 / 중복
+- Verified (vuejs.org/api/composition-api-setup.html, Vue 3.4 release notes).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — Composition API FULL Vue 3.4+ patterns |