[React] Context API와 Redux 비교

컨텍스트 API 설명 https://huirin.tistory.com/123 

[React] context API

 

Redux 설명 https://huirin.tistory.com/165

[React] Redux 란 무엇인가?

 

---

Context API vs Redux

 

1. 미들웨어

리덕스에는 미들웨어(middleware)라는 개념이 존재한다. 리덕스로 상태관리를 할 때, 리듀서 함수를 사용한다. 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행할 수 있다.

미들웨어는 주로 비동기작업을 처리 할 때 많이 사용된다.

 

2. 유용한 함수와 Hooks

Context API를 사용할 때에도 Context도 만들어야 하고, Context와 Provider 설정도 하고 각 Context를 편하게 사용하기 위해 커스텀 Hook을 만들어 사용해야 하는데, 리덕스에서는 여러 기능이 존재한다.

connect 함수를 사용하면 리덕스의 상태 또는 액션 생성 함수를 컴포넌트의 props로 받아올 수 있으며, useSelector, useDispatch, useStore 와 같은 Hook들을 사용하면 손쉽게 상태를 조회하거나 액션을 디스패치 할 수 있다.

 

connect함수와 useSelector 함수에는 내부적으로 최적화가 잘 이루어져 있어서 실제 상태가 바뀔때만 컴포넌트가 리렌더링 되는 반면, Context API를 사용할 때에는 그러한 최적화가 자동으로 이루어져있지 않기 때문에 context가 지니고 있는 상태가 바뀌면 해당 Context의 Provider 내부 컴포넌트들이 모두 리렌더링 된다.

 

3. 하나의 커다란 상태

Context API를 사용해서 글로벌 상태를 관리 할 때에는 일반적으로 기능별로 Context를 만들어서 사용하는 것이 일반적이다. 반면 리덕스에서는 모든 글로벌 상태를 하나의 커다란 객체에 넣어서 사용하는 것이 필수이다. 때문에 매번 Context를 새로 만두는 수고로움을 덜 수 있다.