Prop Drilling이란?

Prop Drilling이란 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기위해 여러 중간 컴포넌트를 통해 값을 내려주는 것을 의미한다.

중간 컴포넌트에서 사용되지 않더라도 자신이 원하는 컴포넌트에서 사용하기 위해선 꼭 지나쳐야하는데 이때 부모에서 원하는 자식 컴포넌트까지 prop이 뚫고 내려가는 모양을 prop drilling이라 한다.

import React from 'react';

function App() {
    return <GrandFather />;
}

function GrandFather() {
    const name = '할아버지';
    return <Mother GrandFatherName={name} />;
}

function Mother(props) {
    return <Child GrandFatherName={props.GrandFatherName} />;
}

function Child({ GrandFatherName }) {
    console.log(GrandFatherName);
    return <div>{GrandFatherName}</div>;
}

export default App;

장점

1. 명시적인 값의 사용
2. 값 추적 용이성
3. 코드 변경 파악 용이성

단점

1. 프로퍼티 데이터 형식 변경의 불편함
2. 중간 컴포넌트에 불필요한 프로퍼티 전달
3. 누락된 프로퍼티 인지의 어려움
4. 프로퍼티 이름 변경 추적의 어려움

단순하게 위 코드와 같이 몇가지로 이루어진 컴포넌트 사이에서의 데이터 이동은 값을 추적하는데도 용이하고, 경로를 알 수 있으므로 코드 변경이 어떤 영향을 어디에 끼치는지도 파악하기 쉽다.

 

하지만 데이터 이동이 많은 크기의 프로젝트에선 prop drilling을 하게되면 데이터의 이동경로가 어지러워지고, 불필요한 이동이 많아져 사용함에 있어 어지러워질 수 있다.

 

이땐 전역 상태관리 라이브러리를 사용하여 값을 중앙 상태저장소에서 각 컴포넌트에 보내주면 된다.

 

---

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

[React] Prop Drilling 이란 무엇이고, 어떻게 해결할 수 있을까?

https://medium.com/@heoh06/%EB%A6%AC%EC%95%A1%ED%8A%B8-redux%EC%99%80-%EC%82%AC%EC%9A%A9%EB%B2%95-731853fc3cd4

[리액트] Redux와 사용법