처음 만난 리덕스 (Redux) 문서


11.3 redux-thunk

Thunk의 의미와 Thunk를 사용하는 이유에 대해서는 이해를 했으니, 지금부터는 redux-thunk에 대해서 배워보도록 하겠습니다.

redux-thunk GitHub
https://github.com/reduxjs/redux-thunk

지금보시는 화면은 redux-thunk 공식 GitHub repository입니다.
Star가 17,600개 정도로 굉장히 많은 것을 볼 수 있습니다.
그리고 프로젝트 설명에는 Thunk middleware for Redux라고 써있는 것도 볼 수 있습니다.

프로젝트 설명에 써있는 것처럼, redux-thunk는 Redux middleware입니다.
쉽게 말하면, Redux에 연동해서 thunk를 사용할 수 있게 해주는 외부 패키지라고 생각하면 됩니다.

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunkMiddleware));

Redux에서 Thunk를 사용하기 위해서는, 이 코드처럼 redux-thunk middleware를 Redux에 연동해야 합니다.
createStore() 함수를 사용해서 Redux Store를 만들 때, 이렇게 applyMiddleware() 함수를 사용해서 thunkMiddleware를 끼워넣으면 됩니다.

이러한 Thunk는 Redux에서 비동기 로직을 사용하기 위한 표준 방법이라고 할 수 있습니다.
하지만 단순히 비동기 로직만을 위해서 사용해야 하는 것은 아니고, 동기적인 로직과 비동기적인 로직을 포함해서 다양한 작업들을 수행할 수 있습니다.


마지막 업데이트: 2023년 07월 14일 00시 00분

이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.