Antigravity Agent
2.9 KiB
2.9 KiB
Prop Drilling
📌 Brief Summary
Prop Drilling(프롭 드릴링)은 React 애플리케이션에서 데이터를 전달하기 위해 중간 단계의 여러 컴포넌트를 거쳐 prop을 하위로 계속 내려보내는 현상을 의미합니다. 이로 인해 컴포넌트에 수많은 prop이 생성되고 '구성 지옥(configuration hell)'이 발생하여 UI의 유연성이 떨어질 수 있습니다 [1, 2]. 이러한 문제를 해결하기 위해 React에서는 Context API나 Compound Components 같은 패턴을 활용하여 프롭 드릴링을 방지합니다 [2, 3].
📖 Core Content
- Prop-Driven API의 한계: 컴포넌트 설계 초기에는 prop을 통한 데이터 전달이 문제가 없어 보일 수 있으나, 레이아웃 변경이나 조건부 동작 등 요구사항이 늘어날 때마다 prop이 폭발적으로 증가하게 됩니다 [1]. 이렇게 레이아웃과 동작을 prop에 하드코딩하게 되면, 작은 변경에도 시스템이 무너지기 쉬운 강한 결합(coupling)이 발생합니다 [4].
- 프롭 드릴링 회피를 위한 Compound Components 패턴: Compound Components 패턴은 관련된 하위 컴포넌트들을 그룹으로 제공하여, 명시적인 프롭 드릴링 없이 암시적으로 상태를 공유할 수 있게 해줍니다 [2]. 예를 들어 Accordion 컴포넌트를 만들 때, 각 하위 요소에 상태를 prop으로 내리지 않아도 구조 자체가 직관적인 API 역할을 합니다 [2].
- React Context의 활용: 컴포넌트 간의 깊은 프롭 드릴링을 피하고 복합 UI(Compound UIs) 전체에서 공유 상태를 관리하기 위해 내부적으로 React의 Context를 사용합니다 [3, 5]. 이 때 Context는 공개 API가 아닌 내부적인 규약(Internal Contract)으로 사용되며, 소비자는 프롭을 전달하거나 상태를 관리할 필요 없이 컴포넌트를 조합(Composition)하는 데 집중할 수 있습니다 [5-7].
- 조합(Composition) 중심 설계: 컴포넌트가 어떻게 보여야 하는지 prop으로 전부 지시하는 대신, 컴포넌트에게 상태와 규칙만 부여하고 소비자가 유연하게 레이아웃 구조를 짤 수 있도록 함으로써 프롭 드릴링 문제를 근본적으로 해결할 수 있습니다 [6].
🔗 Knowledge Connections
- Related Topics: Compound Components, React Context, Component Composition
- Projects/Contexts: 공유 UI 라이브러리 및 디자인 시스템 구축, 확장 가능한 React 컴포넌트 설계
- Contradictions/Notes: 제공된 소스에는 Prop Drilling이 발생하는 구체적인 안티 패턴 코드나 깊은 기술적 원리에 대한 정보는 다소 부족하며, 주로 Compound Components와 Context를 활용하여 프롭 드릴링을 '회피'하는 방법과 그 장점 위주로 설명되어 있습니다.
Last updated: 2026-04-26