[React] 프롭스 드릴링

프레젠테이션 컴포넌트

프레젠테이션 컴포넌트란? 자식 컴포넌트에게 프롭스를 전달하는 역할만 하는 컴포넌트

• 상위에서 받은 props를 하위로 전달하는 것이 주된 역할
• ⚠️ 여러 컴포넌트를 거쳐 전달 시 프롭스 드릴링(props drilling) 문제 발생 가능

프롭스 드릴링 패턴

프롭스 드릴링이란?

데이터(혹은 함수)를 상위 컴포넌트에서 하위 컴포넌트로 전달하기 위해, 중간 컴포넌트들을 거쳐야 하는 패턴

예시 코드

// App.js
function App() {
  const user = "User1"; // 최상위에서 데이터 생성
  return <ParentComponent user={user} />;
}

// ParentComponent.js
function ParentComponent({ user }) {
  return <ChildComponent user={user} />;
}

// ChildComponent.js
function ChildComponent({ user }) {
  return <GrandChildComponent user={user} />;
}

// GrandChildComponent.js
function GrandChildComponent({ user }) {
  // 데이터가 최종적으로 렌더링되는 프레젠테이션 컴포넌트
  return <div>{user}</div>;
}

❌ 프롭스 드릴링의 문제점

1. 불필요한 전달: 중간 컴포넌트들이 사용하지 않는 데이터도 계속 전달해야 함
   1. 예: 100번째 자식에게 전달하려면 99개의 중간 컴포넌트를 거쳐야 함
2. 유지보수 어려움: 깊은 계층 구조에서 전달 로직이 복잡해짐
3. 재사용성 저하: 중간 컴포넌트가 데이터 전달에 의존하게 됨

🛠 리액트의 해결 방법: 전역 상태 관리

• 리액트는 이러한 문제를 해결하기 위해 전역 상태 관리 기능을 제공함
• 전역 상태 관리를 사용하면 데이터가 필요한 컴포넌트에서 바로 접근 가능하며, 중간 컴포넌트를 거칠 필요 없음
• 대표적인 도구:
  • Context API: 리액트 내장 기능
  • Redux: 널리 사용되는 외부 라이브러리
  • Zustand: 경량화된 상태 관리 도구