D-46

🔍 Props Drilling이란?

Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치며 데이터를 전달하는 현상을 의미한다.

위 그림처럼 컴포넌트 A의 state를 컴포넌트 D로 전달하기 위해선 사이에 있는 컴포넌트 B, C를 거쳐야 한다.

🔍 Props Drilling의 문제점

Props의 전달 횟수가 5회 이내로 많지 않다면 문제가 되지 않는다. 하지만 규모가 커지고 구조가 복잡해지면서 Props의 전달과정이 늘어난다면 다음과 같은 문제가 발생한다.

• 코드의 가독성이 매우 나빠지게 된다.
• 코드의 유지보수가 힘들어지게 된다.
• state변경 시 Props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생해 웹 성능에 악영향을 줄 수 있다.

🔍 해결 방법

과도한 Props Drilling을 방지하기 위한 방법으로 상태관리 라이브러리(Redux, Context api, Mobx, Recoil 등)를 사용하는 방법이 있다.
이 방법을 사용하면 전역으로 관리하는 저장소에서 직접 state를 꺼내 쓸 수 있기 때문에 Props Drilling을 방지할 수 있다.