Props Drilling

🎈주제 선정 이유?

프로젝트에 필요한 redux toolkit에 대해 공부하다가, 상태관리가 등장한 배경에 대해서 궁금해져서 조사하게 되었다.

⛳ 학습 목표

props drilling은 무엇이고 어떻게 피할 수 있는지에 대해 학습한다.

⛏️ Props Drilling이란

Props Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다.

😀 Props Drilling의 장점

• 컴포넌트 간에 데이터를 전달하는 가장 쉽고 빠르게 전달할 수 있다.
• (작은 규모의 어플리케이션에서) 컴포넌트를 잘게 분할해서 Props drilling을 통해 전달하면, 코드를 실행하지 않고 정적으로 따라가는 것만으로도 어떤 데이터가 어디서 사용되는지 쉽게 파악할 수 있으며, 수정도 용이하다

😱 그렇다면 Props Drilling이 문제인 이유는 무엇인가?

어플리케이션의 규모가 커지고, 중간 컴포넌트의 수가 많아지게 되면서 불필요한 props 전달로 인해 유지보수도 어렵고 가독성도 떨어질 수 있다.

• 필요보다 많은 props를 전달하다가, 컴포넌트를 분리하는 과정에서 필요하지 않은 props가 계속 남거나 전달되는 문제
• props 전달이 누락되었는데 defaultProps가 과용되었을 때, props가 전달되지 않은 상황을 인지하기가 어려운 문제
• 자세한 설명
• props의 이름이 전달 중에 변경되어서 데이터를 추적하기 쉽지 않게되는 문제
• 자세한 설명(ChatGPT)>> Props Drilling을 사용하면서 props의 이름이 중간 컴포넌트를 거치면서 변경되는 경우를 의미한다. 이는 props의 이름이 상위 컴포넌트에서 하위 컴포넌트로 전달되는 동안 수정되거나 재정의되어 데이터의 추적이 어려워지는 상황을 말한다.예를 들어, 상위 컴포넌트에서 하위 컴포넌트로 value라는 이름의 props를 전달한다고 가정해보자. 하지만 중간 컴포넌트에서 value를 받은 후 다른 이름으로 변경하거나 다른 컴포넌트에 전달할 수 있다. 이 경우 하위 컴포넌트에서는 원래 props 이름이 무엇이었는지 추적하기 어려워지고, 코드를 분석하거나 디버깅하기 어려워진다.이러한 상황에서는 코드의 가독성과 유지보수성이 저하될 수 있다. 특히 프로젝트가 커지고 여러 컴포넌트가 복잡하게 얽혀있을 때, props 이름의 변경이 제대로 추적되지 않으면 버그를 찾기 어려워진다.

🔧 그렇다면 이러한 Props Drilling으로 생기는 문제 피하는 방법은?