Props Drilling이란?

React 애플리케이션에서 상태관리와 props 전달은 필수적인 요소입니다. 상황에 따라 자식 컴포넌트에 전달해야하는 경우가 많은데, 이때 props를 계속해서 전달하는 props drilling이 발생할 수 있습니다.

 

예를 들어, 로그인 정보를 생각해보면 서비스에 사용되는 대부분의 컴포넌트에서 로그인 정보가 필요할 수 있습니다.

그렇게 되면 로그인 컴포넌트가 최상위 컴포넌트로 로그인 정보를 전달해주고, 상위 컴포넌트에서 하위 컴포넌트로 계속해서 props로 넘겨주는 상황이 발생할 수 있습니다.

로그인 컴포넌트로부터 실제 사용하는 G, F 컴포넌트에 전달하기 위해선 회원 정보를 사용하지도 않는 A,B,C,D,E 컴포넌트를 지나가게 됩니다.

 

이렇게 Props를 계속 내려주는 것을 Props Drilling이라고 합니다. 사진으로만 봐도 조금 비효율적이라는 생각이 들죠.

 

Props Drilling의 문제점

그렇다면 이런 Props Drilling을 피해야하는 이유는 뭘까요?

 

1. 가독성 저하

-Props drilling이 발생하면 상위 컴포넌트에서 하위 컴포넌트로 props를 계속 전달해야 합니다. 이로 인해 컴포넌트의 구조가 복잡해지고, 코드가 길어져 가독성이 떨어집니다. 특히, 많은 컴포넌트가 중첩되어 있을 경우, 어떤 props가 어디서 오는지 파악하기 어려워집니다.

 

2. 유지보수의 어려움

-컴포넌트가 변경되거나 새로운 props가 추가될 때, 모든 중간 컴포넌트에서 해당 props를 수정해야 합니다. 이는 코드의 유지보수를 어렵게 만들고, 실수로 인해 버그가 발생할 가능성을 높입니다.

 

3. 불필요한 리렌더링

-상위 컴포넌트에서 props가 변경되면, 해당 props를 사용하는 모든 하위 컴포넌트가 리렌더링됩니다. 이로 인해 성능 저하가 발생할 수 있으며, 특히 큰 애플리케이션에서는 불필요한 리렌더링이 성능에 큰 영향을 미칠 수 있습니다.

 

 

4. 컴포넌트 간의 강한 의존성

-Props drilling은 컴포넌트 간의 의존성을 증가시킵니다. 특정 컴포넌트가 다른 컴포넌트의 props에 의존하게 되면, 해당 컴포넌트를 재사용하기 어려워지고, 코드의 재사용성이 떨어집니다.

 

 

5. 테스트의 복잡성

-Props drilling이 심한 경우, 컴포넌트를 테스트할 때 필요한 props를 모두 전달해야 하므로 테스트 코드가 복잡해질 수 있습니다. 이는 테스트의 가독성을 떨어뜨리고, 테스트 작성 및 유지보수를 어렵게 만듭니다.

 

 

 

이러한 문제점들은 Props drilling을 피하고, 더 나은 상태 관리 방법을 고려해야 하는 이유입니다. React Context API나 Redux와 같은 상태 관리 라이브러리를 사용하면 이러한 문제를 효과적으로 해결할 수 있습니다.

 

다음 글에서는 전역 상태 관리의 필요성과 React Context API 및 Redux와 같은 전역 상태 관리 라이브러리에 대해 다뤄보겠습니다.