📚 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를 계속해서 내려 보내는 과정을 의미한다.
• 이 과정은 코드를 복잡하게 만들고, 유지보수를 어렵게 만든다.
• Prop drilling은 React 애플리케이션에서 데이터를 전달하기 위해 필요한 과정을 설명하는 용어이다.
• 이는 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것을 의미합니다.
• 이러한 중간 컴포넌트는 원하는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 필요하지만 해당 값을 직접 사용하지 않는 경우에도 프로퍼티를 받고 전달해야 한다.

장점

• 명시적인 값의 사용
  • Prop drilling을 통해 값을 전달하는 방식은 어디서 데이터가 사용되는지 명확하게 보여준다.
  • 각 컴포넌트에서 어떤 프로퍼티를 받아 사용하는지를 확인할 수 있어 코드의 의도를 더 명확하게 파악할 수 있다.
• 값 추적 용이성
  • Prop drilling을 사용하면 값의 흐름을 쉽게 추적할 수 있다. 값이 어떤 컴포넌트를 거쳐 전달되는지를 알 수 있으므로 버그를 디버깅하거나 코드를 변경할 때 더욱 편리하다.