[React] Props Drilling

Props Drilling은 부모 컴포넌트에서 직접 사용하는 자식 컴포넌트로 Props를 전달할 때 전달용으로만 

거쳐가는 컴포넌트가 발생하는 것을 말한다. 

 

const ParentComponent = () => {
    return <FirstChildComponent title={"Props! Drilling!"}/>
};

const FirstChildComponent = ({title}) => {
    return <SecondChildComponent title={title} />
};

const SecondChildComponent = ({title}) => {
    return <ThirdChildComponent title={title} />
};

const ThirdChildComponent = ({title}) => {
    return <div>{title}</div>
};

Props가 실제 사용되는 ThirdChildComponent까지 가기 위해서 First > Second 를 거쳐간다. 

이게 예시처럼 Depth가 적은 경우에는 크게 문제가 되지 않을 수 있다. 

 

하지만 많은 Depth를 거치게 되면 점차 실제 Props를 사용하는 컴포넌트를 추적하기 어려워진다.

 

즉, 유지보수가 어려워진다는 뜻이다. 

 

이것을 해결하기 위한 가장 간단한 방법은 전역 상태관리 라이브러리를 사용하는 것이다. 

 

전역 상태관리 라이브러리에 상태를 정의해두고 필요한 컴포넌트에서 

해당 상태를 가지고오면 간단하게 해결된다.