[React] Props drilling

 

사실 내용적으로는 아는 내용인데 props drilling이란 단어를 들을 때마다 이게 뭐였지란 생각이 계속 들어 정리해보려한다

 

 

Props Drilling

props drilling이란 react 컴포넌트 트리에서 props를 통해 데이터를 전달할 때 중간 컴포넌트는 그 데이터가 필요하지 않음에도 하위 컴포넌트에게 데이터를 전달하기 위해 props를 전달해야하는 과정이다

 

 

 

장점

장점이라고 말하긴 애매하지만

• 데이터를 가장 쉽고 빠르게 전달할 수 있다
• 정적으로 따라가기만 해도 어떤 데이터가 어디서 사용되는지 쉽게 파악 가능하다

 

 

단점

• 규모가 커지고, 컴포넌트가 많아지면 너무 복잡해진다
• props 의 이름이 중간에 변경된 것을 추적하기 쉽지않다
• 많은 props를 전달하다가 필요없는 props가 계속 남거나 전달될 수 있다
• defaultProps 를 사용할때, props가 전달되지 않았음에도 인지하지 못할 수 있다

 

해결방법

• 여러 컴포넌트로 나누지 않는다(react에서 권장 x)
• 데이터를 필수로 필요한 최소 공통 부모 컴포넌트에 배치
• defaultProps를 중요하지 않은 컴포넌트에서만 사용(중요한데서 오류가 나면 꼭 볼수 있게)
• 상태관리도구를 사용(Context API, redux, recoil 등)