Props drilling이란

리액트에서 props drilling은 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달하는 과정에서, 그 데이터를 실제로 필요로 하지 않는 중간 컴포넌트들이 해당 props를 단순히 전달하기 위해 포함되는 패턴을 말합니다. 이 현상은 트리 구조가 깊어질수록 더욱 복잡해질 수 있으며, 관리가 어려워지고 코드의 유지보수가 힘들어집니다.

예를 들어, 최상위 부모 컴포넌트가 3단계 아래의 자식 컴포넌트에 데이터를 전달하고자 할 때, 중간의 2개의 컴포넌트들은 그 데이터를 사용하지 않더라고 단순히 props로 전달해야 합니다.

최상위 부모 컴포넌트와 3단계 아래의 자식 컴포넌트 사이에 있는 컴포넌트들이 그 데이터를 불필요하게 포함하게 됩니다. 이러한 구조는 컴포넌트가 많아질수록 비효율적입니다.

Props drilling이 발생하는 예시를 보겠습니다.

const GrandParent = () => {
	const data = '전달할 데이터';
	
	return <Parent data={data} />;
};

const Parent = ({ data }) => {
	return <Child data={data} />;
};

const Child = ({ data }) => {
	return <div>{data}</div>;
};

data는 GrandParent에서 생성되어 Child로 전달되지만, Parent는 data를 사용하지 않음에도 단순히 전달하기 위해 포함되어야 합니다.

Props drilling의 문제점

• 중접된 구조로 인해 컴포넌트 간의 의존성이 커집니다.
• 중간 컴포넌트들이 불필요하게 props를 받게 됨으로써 코드의 복잡성이 증가합니다.
• 데이터 전달을 추적과 코드의 유지보수가 어렵습니다.

해결 방법

• 리액트 내부 전역 상태 관리:
  • Context API를 사용하여 중간 컴포넌트를 거치지 않고 필요한 컴포넌트 에서만 데이터를 사용할 수 있게 합니다.
• 리액트 외부 전역 상태 관리:
  • Redux & Redux toolkit 상태 관리 라이브러리를 사용하여 props dilling을 방지합니다.

---

✅ 참고

• What is Prop Drilling and How to Avoid it ?