Props Drilling이란?

props Drilling은 상위 컴포넌트에서 하위 컴포넌트로 props를 내려 하위 컴포넌트에 state를 전달하고자 하는 현상에서

굳이 state가 필요없는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미합니다.

 

위 그림처럼 d에게 state를 전달하기 위해 b,c를 거치며 props를 전달해야하는 과정입니다.

 

Props Drilling의 문제점

Props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling 은 큰 문제가 되지 않습니다. 하지만 규모가 커지고 구조가 복잡해지면서 Props의 전달 과정이 늘어난다면 아래와 같은 문제가 발생합니다.

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

해결 방법

과도한 props Drilling를 방지하기 위해 컴포넌트와 관련 있는 state는 될 수 있으면 가까이 유지하는 방법이 있고,

다른 방법으로는 상태관리 라이브러리를 사용하는 것입니다.

 

상태관리 라이브러리를 사용한다면 전역으로 관리하는 저장소에 직접 state를 넣어 꺼내쓸 수 있기 때문에

이러한 현상을 방지하기 좋습니다.

 

이러한 라이브러리로는 (Redux, Context api , Mobx, Recoil) 등이 있습니다.

 

Props Drilling 예시

예시 1

아래의 예시는 props를 제일 깊은 컴포넌트까지 내려주어야 제대로 작동합니다.

코드를 보고 직접 props를 내려주세요. 지금도 코드를 작성하는 게 번거롭고 복잡한데 이보다 더 깊은 컴포넌트와 복잡한 구조가 있다고 생각해 보세요. 생각만 해도 끔찍합니다.

 

https://react-bvmiba.stackblitz.io

https://react-bvmiba.stackblitz.io

 

이 현상을 해결하는 방법 중 하나는 상태관리 라이브러리를 사용하는 것입니다. Redux를 활용하여

해결한 예시입니다.

 

https://react-dky3fz.stackblitz.io

https://react-dky3fz.stackblitz.io