📚 Reference

📜 Chapter

useContext

Context

Redux

Zustand

props drilling

• props drilling
• Props Drilling
• props drilling은 부모 component에서 하위 component(자식 component의 자식 component 등)로 데이터를 전달할 때 발생하는 것으로, props를 전달하는 것 외에는 props를 필요로 하지 않는 다른 compoent를 통해 ‘drilling(내리 꽂기)’ 된다.
• component를 리팩토링 하고, component를 더 작은 component들로 쪼개지 않고, state를 가장 가까운 부모 component와만 공유함으로써 props drilling 회피할 수 있다.
• Prop drilling은 부모 컴포넌트의 데이터를 아주 깊은 자식 컴포넌트에게 전달하기 위해 중간에 있는 여러 컴포넌트들을 거쳐서 props를 계속해서 내려 보내는 과정을 의미한다.
• 이 과정은 코드를 복잡하게 만들고, 유지보수를 어렵게 만든다.

props drilling을 피하는 방법

• 위계상 멀리/깊게(deep/far)떨어진 component와 state를 공유할 때, React의 Context API 혹은 Redux와 같은 state 관리 라이브러리를 사용할 수 있다.