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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-prop-drilling	Prop Drilling	10_Wiki/Topics	verified	self	Props Drilling Props Threading	none	A	0.9	applied	frontend react prop-drilling state-management antipattern		2026-05-10	pending	language framework TypeScript 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

// 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

function App() {
  const user = useAuth();
  return (
    <Layout sidebar={<Sidebar><UserMenu user={user} /></Sidebar>} />
  );
}
function Layout({ sidebar }: { sidebar: ReactNode }) {
  return <div>{sidebar}</div>;
}

해결 2: Context

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

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)

// 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

// 매 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 · Component_Pattern
• 변형: Context_API · Zustand · Jotai · Redux_Toolkit
• 응용: Theme_System · Auth_Flow · Form_State
• Adjacent: Render_Props · Compound_Component · React_Server_Component

🤖 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 추가