React prop drilling

리액트에선 프로퍼티를 전달하기 위해 부모객체에서 자식 컴포넌트를 사용할때 attributes로 속성값을 넣어주게 되고, 자식 컴포넌트에서 해당 속성을 받아서 사용하게 된다.

 

Parents

<Child p1="p1"/ >

Child

const Child = (props) => {}

 

하지만 앱의 구조가 복잡해지게 되고 부모 자식의 관계가 많아지게 된다면 속성 전달을 위해 거쳐가는 노드가 많아지게 된다.

만약 전달해야할 자식노드까지 10개의 컴포넌트를 거쳐야 한다면 10개의 컴포넌트에서는 자신이 사용하지 않는 프토퍼티 값을 전달을 위해 받아야 하는 상황이 나오게 된다.

 

이러한 현상을 해결하기 위해 전역 state관리에 대한 솔루션들이 나오기 시작했다.