2nd/10_Wiki/Topics/Frontend/Prop Drilling.md

---
id: wiki-2026-0508-prop-drilling
title: Prop Drilling
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Props Drilling, Props Threading]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [frontend, react, prop-drilling, state-management, antipattern]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: TypeScript
  framework: React
---

# Prop Drilling

## 매 한 줄
> **"매 props 의 깊은 component tree 통과"**. 매 parent 가 grandchild 에 data 전달하기 위해 매 intermediate component 가 props 의 단순 forward. 2026 React 19+ 매 Server Component / Context / Zustand 의 5가지 해결책으로 회피.

## 매 핵심

### 매 문제
- Intermediate component 의 매 props type 의 noise.
- Refactoring 의 매 cost — 새 prop 추가 시 매 layer 수정.
- Type drift: 매 layer 마다 prop spread, original type 잃음.

### 매 5가지 해결
1. **Component Composition** (children prop): 매 first choice.
2. **React Context**: 매 theme, auth, locale — 매 cross-cutting concern.
3. **State Management Library**: 매 Zustand, Jotai, Redux Toolkit.
4. **React Server Components** (RSC): 매 server-side data fetching, props 의 root level resolve.
5. **Custom Hook + Module-level store**: 매 small project.

### 매 응용
1. Theme propagation: 매 Context.
2. Auth user: 매 Context + custom hook (`useUser()`).
3. Form state: 매 react-hook-form, TanStack Form.
4. Server data: 매 RSC 또는 TanStack Query.

## 💻 패턴

### Anti: 매 prop drilling
```tsx
// App → Layout → Sidebar → UserMenu 매 user 4 level 통과
function App() {
  const user = useAuth();
  return <Layout user={user} />;
}
function Layout({ user }: { user: User }) {
  return <Sidebar user={user} />;
}
function Sidebar({ user }: { user: User }) {
  return <UserMenu user={user} />;
}
function UserMenu({ user }: { user: User }) {
  return <div>{user.name}</div>;
}
```

### 해결 1: Composition
```tsx
function App() {
  const user = useAuth();
  return (
    <Layout sidebar={<Sidebar><UserMenu user={user} /></Sidebar>} />
  );
}
function Layout({ sidebar }: { sidebar: ReactNode }) {
  return <div>{sidebar}</div>;
}
```

### 해결 2: Context
```tsx
const UserContext = createContext<User | null>(null);

function App() {
  const user = useAuth();
  return (
    <UserContext.Provider value={user}>
      <Layout />
    </UserContext.Provider>
  );
}

function UserMenu() {
  const user = useContext(UserContext);
  return <div>{user?.name}</div>;
}

// Custom hook for safety
function useUser() {
  const user = useContext(UserContext);
  if (!user) throw new Error('useUser must be inside UserProvider');
  return user;
}
```

### 해결 3: Zustand
```tsx
import { create } from 'zustand';

const useUserStore = create<{ user: User | null; setUser: (u: User) => void }>((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

function UserMenu() {
  const user = useUserStore((s) => s.user);
  return <div>{user?.name}</div>;
}
```

### 해결 4: React Server Component (Next.js 16)
```tsx
// app/layout.tsx (server component)
async function Layout({ children }: { children: ReactNode }) {
  const user = await getUser(); // server-side
  return (
    <div>
      <Sidebar user={user} />
      {children}
    </div>
  );
}
```

### 해결 5: Custom hook + module store
```tsx
// 매 simple, no library
let _user: User | null = null;
const listeners = new Set<() => void>();

export function useUser() {
  return useSyncExternalStore(
    (cb) => { listeners.add(cb); return () => listeners.delete(cb); },
    () => _user,
  );
}
export function setUser(u: User) {
  _user = u;
  listeners.forEach((l) => l());
}
```

## 매 결정 기준
| 상황 | 해결 |
|---|---|
| 1-2 level only | 그냥 props (drilling 아님) |
| Cross-cutting (theme, auth, locale) | Context |
| Frequently-changing state shared | Zustand / Jotai |
| Server-fetched data | RSC + TanStack Query |
| Complex slot-based UI | Composition (children) |
| Nested form | react-hook-form FormProvider |

**기본값**: 매 Composition 우선 → 매 Context (cross-cutting) → 매 Zustand (frequently-changing client state).

## 🔗 Graph
- 부모: [[React]]
- 변형: [[Zustand]] · [[Jotai]] · [[Redux_Toolkit]]
- Adjacent: [[Render_Props]]

## 🤖 LLM 활용
**언제**: refactor stage 매 component tree 의 prop forwarding 발견 시.
**언제 X**: 매 1-2 level 의 props — 매 over-engineering 의 risk.

## ❌ 안티패턴
- **Context 남용**: 매 every shared state — re-render storm.
- **Single global Context**: 매 split context for performance (theme separate from user).
- **Redux for everything**: 매 server state 매 TanStack Query 가 적합.
- **Spread `{...props}` 의 chain**: type 의 erosion + unused prop forward.

## 🧪 검증 / 중복
- Verified (React 19 docs, Kent C. Dodds blog, Zustand 5).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — 5가지 해결 + RSC 추가 |