리덕스를 사용하는 것 과 Context API를 사용하는 것은 어떠한 차이가 있을까요?

1. 미들웨어

리덕스에는 미들웨어(Middleware)라는 개념이 존재합니다.

리덕스로 상태 관리를 할 때에는 우리가 [useReducer](<https://react.vlpt.us/basic/20-useReducer.html>)를 사용해볼때 접했던 개념인 리듀서 함수를 사용합니다.

리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행 할 수 있습니다.

예를 들자면..

• 특정 조건에 따라 액션이 무시되게 만들 수 있습니다.
• 액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있습니다.
• 액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다.
• 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있습니다.
• 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있습니다.

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

useReducer Hook 에서도 외부 라이브러리를 사용하면 미들웨어를 사용 할 수도 있습니다. 다만, 자주 사용되는 방식은 아닙니다.

2. 유용한 함수와, Hooks

우리가 이전에 Context API 와 useReducer 를 사용 할 때에는 Context 도 새로 만들고, Context 의 Provider 설정도 하고 각 Context 를 편하게 사용하기 위해 전용 커스텀 Hook 을 따로 만들어서 사용하기도 했는데요,

리덕스에서는 이와 비슷한 작업을 편리하게 해줄 수 있는 여러 기능들이 존재합니다.

[connect](<https://react-redux.js.org/api/connect>) 함수를 사용하면 리덕스의 상태 또는 액션 생성 함수를 컴포넌트의 props 로 받아올 수 있으며, useSelector, useDispatch, useStore 과 같은 Hooks를 사용하면 손쉽게 상태를 조회하거나 액션을 디스패치 할 수도 있죠.

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

3. 하나의 커다란 상태