prop drilling이란 무엇이며 어떻게 피하나요?

Question

Accepted Answer

**Prop drilling**이란 데이터를 직접 사용하지도 않는 여러 중간 컴포넌트를 거쳐, 그것을 실제로 사용하는 깊이 중첩된 컴포넌트에 전달하는 것을 의미합니다. 번거로울 뿐 아니라 컴포넌트가 신경 쓰지도 않는 데이터에 강하게 결합되게 만듭니다. ## 문제 ```jsx // `user`는 Avatar에서만 필요하지만, 모든 계층을 통과해야 함 function App() { const [user] = useState({ name: "Ann" }); return ; // App → Layout } function Layout({ user }) { return

; // Layout → Header(사용하지 않음) } function Header({ user }) { return

; // Header → Nav(사용하지 않음) } function Nav({ user }) { return ; // 드디어 여기서 사용됨 } ``` `Layout`, `Header`, `Nav`는 사용하지도 않는 `user`를 받아 넘겨야 합니다. 시끄럽고, 취약하며(prop 이름을 바꾸면 모든 계층을 수정해야 함), 관련 없는 컴포넌트를 결합시킵니다. ## 해결책 1: Context(내장) ```jsx const UserContext = createContext(null); function App() { const [user] = useState({ name: "Ann" }); return ( {/* 최상단에서 한 번만 제공 */} {/* 어디서도 user prop 불필요 */} ); } function Avatar() { const user = useContext(UserContext); // 직접 소비, 중간 계층 건너뜀 return {user.name}

; } ``` Context는 어떤 자손 컴포넌트든 값을 직접 읽게 해주어 중간 계층을 우회합니다. ## 해결책 2 및 그 외 ```text ✓ Context API → 앱 전역/하위 트리 데이터(테마, 사용자, 로케일) ✓ state 라이브러리 → Zustand/Redux/Jotai — 컴포넌트가 store를 직접 구독 ✓ 컴포넌트 합성 → props로 데이터 대신 JSX를 children으로 전달 ``` ```jsx // 합성: 부모가 트리를 구성하여 리프를 직접 전달 ``` ## 과도하게 교정하지 말 것 ```text 약간의 prop drilling(1~2 단계)은 괜찮으며, Context를 추가하는 것보다 더 명확할 때가 많습니다. drilling이 깊거나 광범위해질 때 Context/store에 손을 뻗으세요. ``` ## 왜 중요한가 Prop drilling은 데이터가 넓게 필요하다는 신호를 보내는 흔한 통점입니다. 이를 인식하면 언제 Context, state 라이브러리, 합성에 손을 뻗어야 할지 알 수 있습니다. (정말로 깊을 때) 이를 피하면 컴포넌트가 결합되지 않고 유지보수하기 좋게 유지됩니다. 하지만 판단이 중요합니다. 얕은 drilling은 받아들일 만하며 성급한 추상화보다 단순합니다. 목표는 *깊고 반복적인* 전달을 없애는 것이지, 모든 prop 전달을 없애는 것이 아닙니다.