[React] Props Drilling

❤️‍🔥 Props Drilling

• 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트를 거치면서 데이터를 전달하는 현상
• 아래의 그림처럼 컴포넌트 A의 state를 컴포넌트 D로 전달하기 위해서 사이에 있는 컴포넌트 B, C를 거쳐야 한다.
  

🤔 Props Drilling의 문제점

Props로 전달하는 횟수가 5회 이내로 많지 않다면 Props Drilling은 큰 문제가 되지 않지만 그 이상으로 많아지거나 규모와 구조가 복잡해 지면서 Props의 전달 과정이 늘어난다면 다음과 같은 문제가 발생한다.

• 코드의 가독성 ↓
• 코드의 유지보수의 어려움
• state 변경 시, Props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생(웹 성능 악영향)

---

❤️‍🔥 Props Drilling 방지

1. 컴포넌트와 관련있는 state는 될 수 있으면 가까이 유지한다.
2. 상태관리 라이브러리를 사용한다. (상태관리 라이브러리 사용 시, 전역으로 관리하는 저장소에서 직접 state를 꺼내 쓸 수 있어 Props Drilling을 방지하기에 매우 효과적이다.)