2026-01-11
Props Drilling
Props Drilling이란?
부모 컴포넌트의 props를 여러 단계의 자식 컴포넌트를 거쳐 전달하는 현상
- 실제로 props를 사용하는 컴포넌트는 깊은 곳에 있음
- 중간 컴포넌트들은 props를 사용하지 않고 전달만 함
왜 문제가 되는가?
- 컴포넌트 간 결합도가 높아짐
- 중간 컴포넌트가 불필요한 props를 알게 됨
- 구조 변경 시 수정 범위가 커짐
- 가독성 및 유지보수성 저하
언제 발생하는가?
- 컴포넌트 트리가 깊어질 때
- 공통 상태를 여러 하위 컴포넌트에서 사용할 때
- 상위 컴포넌트에 상태가 집중돼 있을 때
해결 방법
- 상태 위치 조정
- state를 실제 사용하는 컴포넌트 근처로 이동
- Context API 사용
- Context를 생성하고 값을 제공하는 컴포넌트 작성
- 필요한 컴포넌트에서 useContext 훅을 사용해 해당 값에 직접 접근
- 중간 컴포넌트 없이 직접 접근 가능
- 전역 상태 관리 도입
- Redux, Zustand 등
- 애플리케이션의 상태를 중앙에서 관리 가능
- 해당 값이 필요한 컴포넌트에서 직접 불러서 사용
- Custom Hooks 사용
- 관련된 로직을 재사용 가능한 함수로 추상화
- 커스텀 훅 내에서 상태와 로직을 처리
- 필요한 컴포넌트에서 해당 훅을 호출하여 데이터 가져옴