Redux

[React] Redux Thunk (미들웨어)

MiddleWare MiddleWare는 Redux의 핵심적인 기능으로 액션과 Reducer 프로세스 사이에 위치하며, 액션이 dispatch 된 후 MiddleWare를 통해 비동기 작업을 처리하고 이 후 Reducer로 작업 결과를 보내준다. 쉽게, 본래 dispatch는 액션만을 받을 수 있지만, MiddleWare를 사용하면 함수를 입력받을 수 있다. 기본 형태 import { createStore, applyMiddleware } from 'redux'; const middleWare = (store) => (next) => (action) => { //다음 MiddleWare로 액션을 전달해준다. //만약 다음 MiddleWare가 없다면 Reducer로 액션을 전달한다. //next()를 사..

[React] Redux 이해하기

Redux는 Context API를 기반으로 만들어진 상태 관리 라이브러리로 reducer와 action이라는 개념 또한 존재해 상당히 유사하다. 프로젝트의 규모에 따라 Context API만으로도 충분하다. Context API와의 차이점 Context API와의 주된 차이점은 미들웨어이다. 미들웨어는 Action 객체가 Reducer에서 처리되기 전에 원하는 작업을 수행할 수 있다. 액션이 무시되게 하거나 액션 발생시 다른 액션을 발생, 서버에 로깅 등을 하는 등 비동기 처리를 할 수 있게 한다. 그리고 useSelector, useDispatch, useStore와 같은 Hooks를 사용할 수 있다. 마지막으로 Context API와는 다르게 모든 글로벌 상태를 하나의 객체에서 관리할 수 있다. 구..