처음 만난 리덕스 (Redux) 문서
11.1 Thunk
먼저 Thunk의 의미에 대해서 알아보도록 하겠습니다.
위키피디아의 정의를 인용해보면, 일반적으로 프로그래밍에서 사용되는 thunk의 의미는 아래와 같습니다.
“a piece of code that does some delayed work”
이 문장을 한글로 번역해보면, 일부 지연된 작업을 수행하는 코드 조각이라는 의미가 됩니다.
이 말은 당장 실행되어야 하는 어떤 함수나 코드가 아닌, 나중에 실행될 수 있는 함수나 코드를 의미합니다.
하지만 이것은 일반적인 의미이고 조금 더 구체적으로 Redux에서는 thunk의 의미는, Redux Store의 dispatch 및 getState() 함수와 상호 작용할 수 있는 로직을 갖고 있는 함수 작성 패턴을 의미합니다.
쉽게 말하면, Redux Store와 상호작용을 하는 함수를 Thunk라고 부른다고 이해하면 됩니다.
그럼 실제 Thunk 함수는 어떤 형태로 생겼는지 예시 코드를 한 번 볼까요?
const thunkFunction = (dispatch, getState) => {
// Action을 dispatch하거나 store로부터 state를 읽는 코드를 넣을 수 있음
// Async Logic 또는 Side Effects와 관련된 코드도 넣을 수 있음
}
store.dispatch(thunkFunction);
이 코드는 Thunk 함수의 예시를 나타낸 것입니다.
여기에 나와있는 thunkFunction() 함수처럼, Thunk는 Redux Store의 dispatch와 getState 함수를 파라미터로 받게 됩니다.
그래서 함수 내에서 Action을 dispatch하거나 store로부터 state를 읽는 코드를 넣을 수 있으며, Async Logic 또는 Side Effects와 관련된 코드도 넣을 수 있습니다.
그리고 실제로 이 Thunk 함수를 실행하려면, Redux Store의 dispatch 함수를 사용해서 thunkFunction을 dispatch하면 됩니다.
다만, 이렇게 하기 위해서는 사전에 redux-thunk middleware가 Redux에 연동되어 있어야 합니다.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.