docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를 Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류. - 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로 자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거, 동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거. - 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming, Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business, Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로, 나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는 title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백). 원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지. - 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서. - 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는 지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지. - Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경. - 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
This commit is contained in:
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: react-custom-hook-patterns
|
||||
title: Custom Hook 작성 패턴
|
||||
category: Coding
|
||||
status: draft
|
||||
source_trust_level: B
|
||||
verification_status: conceptual
|
||||
created_at: 2026-05-09
|
||||
updated_at: 2026-05-09
|
||||
tags: [react, hooks, custom-hook, abstraction, vibe-coding]
|
||||
tech_stack: { language: "TypeScript / React 18+", applicable_to: ["Web", "React Native"] }
|
||||
applied_in: []
|
||||
aliases: [reusable hook, hook composition]
|
||||
related_existing: [Frontend/Custom_Hooks.md, Frontend/Custom-Hooks-Patterns.md]
|
||||
duplicate_check: "기존 두 파일은 폭넓은 개요. 본 문서는 네이밍·반환형·테스트 측면 보강."
|
||||
---
|
||||
|
||||
# Custom Hook 작성 패턴
|
||||
|
||||
> Custom hook 은 `use` 로 시작하는 함수 + 다른 hook 호출. 핵심은 **이름이 의도를 정확히 말하는가**, **반환형이 사용처에 자연스러운가**, **테스트 가능한가**.
|
||||
|
||||
## 📖 핵심 개념
|
||||
- 이름: `use<Subject><Action>` (e.g. `useFormSubmit`, `useDebouncedValue`).
|
||||
- 반환형: 한두 개면 tuple, 셋 이상이면 객체.
|
||||
- 부작용은 hook 내부 useEffect 로, 호출자는 dispatcher / state 만 받음.
|
||||
|
||||
## 💻 코드 패턴
|
||||
|
||||
```ts
|
||||
// ✅ 단일 값 → 그냥 반환
|
||||
function useDebouncedValue<T>(value: T, ms: number): T {
|
||||
const [debounced, setDebounced] = useState(value);
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => setDebounced(value), ms);
|
||||
return () => clearTimeout(t);
|
||||
}, [value, ms]);
|
||||
return debounced;
|
||||
}
|
||||
|
||||
// ✅ state + setter — tuple
|
||||
function useToggle(initial = false): [boolean, () => void] {
|
||||
const [v, set] = useState(initial);
|
||||
const toggle = useCallback(() => set(x => !x), []);
|
||||
return [v, toggle];
|
||||
}
|
||||
|
||||
// ✅ 다중 반환 — 객체 + 명시적 키
|
||||
function useInfiniteQuery<T>(...): {
|
||||
data: T[]; isLoading: boolean; hasNextPage: boolean; fetchNextPage: () => void;
|
||||
} { ... }
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준
|
||||
| 반환 항목 수 | 형식 |
|
||||
|---|---|
|
||||
| 1 | 그대로 반환 |
|
||||
| 2 | tuple `[value, setter]` (useState 패턴) |
|
||||
| 3+ | 객체 (key 명시로 가독성) |
|
||||
| 다양한 변형이 필요 | discriminated union 으로 상태 표현 |
|
||||
|
||||
| 추출 기준 | hook |
|
||||
|---|---|
|
||||
| 컴포넌트 간 상태 로직 재사용 | ✅ |
|
||||
| 단일 컴포넌트 내 정리 | ❌ (그냥 함수) |
|
||||
| 외부 시스템 동기화 (websocket, sub) | ✅ |
|
||||
| 순수 변환만 | ❌ (일반 함수) |
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **`use` 가 아닌 이름**: ESLint hooks 룰 깨짐. 일반 함수로 인식.
|
||||
- **조건부 hook 호출**: `if (x) useEffect(...)`. React rules 위반.
|
||||
- **반환 객체 매번 새 reference**: 호출자 deps 무한 trigger. 내부 useMemo / 안정 참조.
|
||||
- **부작용 노출**: useDebounced 가 ref / dispatcher 노출 — 호출자가 hook 내부 모르고 mutate.
|
||||
- **테스트 불가능**: hook 안에서 `Date.now()`, `Math.random()` 직접. 시간/랜덤 주입 가능하게.
|
||||
|
||||
## 🤖 LLM 활용 힌트
|
||||
- LLM에게 "이 컴포넌트에서 X 로직을 hook 으로 추출" 요청 시 위 네이밍 + 반환형 규칙 강조.
|
||||
- 테스트는 `@testing-library/react` 의 `renderHook` 사용.
|
||||
|
||||
## 🔗 관련 문서
|
||||
- [[React_useEffect_Pitfalls]]
|
||||
- [[Pure_Functions_in_Practice]]
|
||||
Reference in New Issue
Block a user