2026-01-26

Props Drilling

Props Drilling이란?

부모 컴포넌트의 props를 여러 단계의 자식 컴포넌트를 거쳐 전달하는 현상

  • 실제로 props를 사용하는 컴포넌트는 깊은 곳에 있음
  • 중간 컴포넌트들은 props를 사용하지 않고 전달만 함

왜 문제가 되는가?

  • 컴포넌트 간 결합도가 높아짐
  • 중간 컴포넌트가 불필요한 props를 알게 됨
  • 구조 변경 시 수정 범위가 커짐
  • 가독성 및 유지보수성 저하

언제 발생하는가?

  • 컴포넌트 트리가 깊어질 때
  • 공통 상태를 여러 하위 컴포넌트에서 사용할 때
  • 상위 컴포넌트에 상태가 집중돼 있을 때

해결 방법

  • 상태 위치 조정
    • state를 실제 사용하는 컴포넌트 근처로 이동
  • Context API 사용
    • Context를 생성하고 값을 제공하는 컴포넌트 작성
    • 필요한 컴포넌트에서 useContext 훅을 사용해 해당 값에 직접 접근
    • 중간 컴포넌트 없이 직접 접근 가능
  • 전역 상태 관리 도입
    • Redux, Zustand 등
    • 애플리케이션의 상태를 중앙에서 관리 가능
    • 해당 값이 필요한 컴포넌트에서 직접 불러서 사용
  • Custom Hooks 사용
    • 관련된 로직을 재사용 가능한 함수로 추상화
    • 커스텀 훅 내에서 상태와 로직을 처리
    • 필요한 컴포넌트에서 해당 훅을 호출하여 데이터 가져옴

참고자료

https://velog.io/@rachel28/Prop-Drilling

https://slog.website/post/13

https://disco-biscuit.tistory.com/185

results matching ""

    No results matching ""