Props Drilling

Props Drilling이란?

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

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

Props Drilling의 문제점

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

따라서, 웹성능에 악영향을 줄 수 있다.

해결방법

과도한 Props Drilling을 방지하기 위한 방법으로는 컴포넌트와 관련있는 state는 될 수 있으면 가까이 유지하는 방법과 상태관리 라이브러리를 사용하는 방법이 있다.

상태관리 라이브러리를 사용하게 되면 전역으로 관리하는 저장소에서 직접 state를 꺼내쓸 수 있기 때문에 Props Drilling을 방지하기에 매우 효과적이다.