Redux vs. React Context 어떤것을 써야할까?

대표적으로 많이 쓰이는 Redux, Mobx가 State관리하는 라이브러리인데요. 
Redux가 Mobx보다 많이 사용되어져서 Context와 비교해보게 되었습니다.

왜 React에서 16.3부터 context 를 제공하였을까요?
class 기반의 사용하였을 경우 provider,consumer를 이용하여 쓰기에는 조금 불편하였습니다.
hook이 나온 이후에는  useContext, useReducer를 이용하면 편리해졌습니다.

그러면 왜? 아직도 많은 업체들은 Redux를 사용할까?

대략적으로 비교를 해보았습니다.

Context	Redux
store 또는 관리하는것이 없다.	하나의 store에 하나의 object로 관리 되어진다.
React Components에서만 작동	React Components 밖에서도 사용 할 수 있다.
prop-drilling을 피할 수 있다.	prop-drilling을 피할 수 있다.
Provider와 Comsumer 값을 React DevTool로 볼수있다. 하지만 history를 알수 없다.	redux devtool이 훌륭하게 제공되어진다. history와 action과 state 변화에 되어서 확인 할 수 있다.
context 값이 변경되었을 시, update를 skip 할수 있는 방법이 없다. consume하고있는 component들이 모두 업데이트 된다. (전체적으로 리렌더링)	action을 dispatch 하고 reducer로 업데이트 할수 있다. 부분적으로 업데이트 가능 (부분적으로 리렌더링)
side effect에 대한 메커니즘이 없다.	middleware로  side effect를 관리 할 수 있다.

 

개인적인 생각

Context 를 실무에 사용한 사례 - (간단한 값들, 많은 component에 리렌더링을 많이 하여도 상관없는 경우들)
 - 언어팩
 - 테마
 - 디바이스 체크 (isMobile)
 - 페이지 제목 (같은 위치)
 - 기타 등등

Redux를 실무에 사용한 사례 - (모든 UI 범위에 store로 관리된 state 값이 필요한 경우)
  - 위에 Context 사례들 다 가능함
  - 컴포넌트간에 멀리 떨어져 있는경우 ( 예: 컴포넌트 자식에 자식에 자식 )
  - 비동기적인 처리가 필요할 경우 또는 사이드 이펙트 관리 ( middleware - 예시: redux-saga )

결론

context는 소규모 프로젝트 또는 간단한 값을 처리할때 사용하면 좋을듯하고,
Redux는 대규모 프로젝트에 복잡한 로직이 필요한 경우에 사용하면 좋을듯 합니다.

Redux의 사용함에 불편함은 코드가 많이 분산되어서 귀찮은 부분이 있었지만 Redux Toolkit  가 공식적으로 제공하고나서 많이 편리해졌습니다.

참고사이트:

kentcdodds.com/blog/how-to-use-react-context-effectively

How to use React Context effectively

blog.isquaredsoftware.com/2021/01/context-redux-differences/

Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)