프로퍼티 드릴링이란 무엇인가?
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
React 및 컴포넌트 기반 프레임워크를 사용하는 개발자(중급~고급)
핵심 요약
- 프로퍼티 드릴링(Prop Drilling)은 데이터가 중간 컴포넌트를 거쳐 최종 필요 컴포넌트에 전달되는 과정을 의미하며,
와 같은 하위 컴포넌트가 데이터를 직접 필요로 할 때 발생 - 문제점: 가독성 저하, 코드 복잡성 증가, 컴포넌트 간 결합도 증가, 확장성 저하
- 해결책:
React Context API
및useContext
Hook 사용Redux
,Zustand
등의 상태 관리 라이브러리 활용Component Composition
을 통한 JSX 전달 방식Custom Hook
(예:useUserData()
)으로 로직 캡슐화
섹션별 세부 요약
1. 프로퍼티 드릴링의 정의
App
→ParentComponent
→ChildComponent
→GrandchildComponent
→DeeplyNestedComponent
와 같은 계층 구조에서userData
가 중간 컴포넌트를 거쳐 전달- 중간 컴포넌트는 데이터를 사용하지 않지만, props를 전달하기 위해
{data}
를 받아야 함
2. 문제점
- 가독성 저하: 중간 컴포넌트의 props가 데이터 소스를 추적하기 어려움
- 코드 복잡성 증가: 중간 컴포넌트가 불필요한 props를 처리해야 하며, re-render 발생 가능성
- 결합도 증가: 데이터 변경 시 중간 컴포넌트에도 영향 발생
- 확장성 저하: 계층 구조가 깊어질수록 관리가 어려워짐
3. 해결 방안
React Context API
:Provider
컴포넌트로 데이터를 공급하고,useContext
Hook으로 데이터 접근 가능State Management Libraries
(예:Redux
):- 중앙 집중식 상태 관리로
props
전달 없이 데이터 직접 접근 Component Composition
:
컴포넌트에{children}
으로 하위 컴포넌트 직접 전달Custom Hook
:useUserData()
와 같은 커스텀 훅으로 로직 재사용 가능
결론
React Context API
와useContext
는 간단한 글로벌 데이터 공유에 적합하며,Redux
는 복잡한 상태 관리에 효과적Component Composition
과Custom Hook
을 통해 중간 컴포넌트의 불필요한 props 전달을 줄이고, 코드의 가독성과 유지보수성을 향상시킬 수 있음