React - Prop Drilling & Context API v.s Redux

[ React Prop drilling 이슈 ]

 

React에서 자식 컴포넌트에 데이터를 전달하고 싶은 경우 props를 통해 데이터를 간편하게 전달할 수 있습니다.

 

하지만 깊이 중첩된 자식 컴포넌트에 데이터를 전달하려는 경우에 문제가 생깁니다.

 

그 문제란, 데이터를 전달하려는 조상 컴포넌트와 데이터를 받으려는 자식 컴포넌트 중간의 많은 컴포넌트들이 모두 props로 데이터를 받고 다시 자식 컴포넌트에 props로 데이터를 전달해야하는 prop drilling을 해야합니다.

 

만약 전달하려는 데이터가 state라면 어떨까요?

 

현재 가지고 있는 state값과 다른 state값을 전달받은 컴포넌트는 리렌더링이 일어납니다. 또한 컴포넌트는 변경된 state값을 부모 컴포넌트에 전달하기도합니다.

 

위와 같은 state의 특성때문에 state값을 많은 자식 컴포넌트를 거쳐가며 특정 컴포넌트에 전달하는 경우 state값이 일관성이 없어지고 예측 불가능하게됩니다.

 

대략 이런 느낌

 

이러한 prop drilling 문제, 상태 관리 문제를 해결하기 위해 state management(상태 관리) 도구인 Redux 혹은 Context API를 사용할 수 있습니다.

 

Redux : https://besforyou.tistory.com/233

Context API : https://besforyou.tistory.com/255

---

[ Redux, Context API 비교 ]

 

Context API	Redux
React 내장 툴	추가적인 설치 필요. Bundle 크기 증가함.
최소한의 세팅만 필요	React 앱과 연동하기 위해 많은 세팅이 필요
자주 업데이트되지 않는 정적인 데이터를 위해 고안됨	정적, 동적 데이터 가리지 않고 잘 동작함
깊이 중첩된 리액트 컴포넌트 구조에서는 Dev Tool을 이용해도 디버깅이 어려움	강력한 Redux Dev Tool 성능 덕분에 디버깅 쉬움
UI 로직, 상태 관리 로직 모두 한 컴포넌트에 존재	UI 로직, 상태 관리 로직을 분리하여 코드 정리 용이함
준비된 자원, 설정, 코드없이 context를 추가하려할때마다 새로운 코드를 짜야함.	초기 설정 이후 새로운 데이터, action 추가 쉬워 확장성 좋음

 

위 비교를 통해 유추할 수 있는 것

 

• 규모가 큰 프로젝트에는 Redux, 소규모 프로젝트에는 Context API
• 단순히 자식 컴포넌트에 데이터 전달 목적이면 -> Context API
• 자주 업데이트되고 변경되는 데이터 -> Redux

---

[ 결론 ]

 

Redux와 Context API 모두 전역 상태 관리에 사용 가능합니다. 하지만 단순히 데이터를 자식 컴포넌트에 쉽게 전달하려는 목적이면 Context API, 상태가 자주 업데이트되고 다루는 상태가 굉장히 많은 대규모 프로젝트에서는 Redux를 사용하는것이 좋습니다.