TIL - React - thunk 라이브러리

오늘은 redux-thunk 라는 미들웨어 사용법에 대해 배웠다.

 

하지만 이해하는데 엄청난 시간이 걸렸다. (지금도 100% 이해한건 아닌듯..)

 

Thunk을 쓰는 이유는 리액트에서 비동기 작업을 수월하게 처리하기 위해 사용한다고 한다.

(비 동기 작업을 처리할 때 가장 많이 사용하는 미들웨어래요.)

 

우리가 원래 액션 생성자 함수를 만들때, 다음과 같이 객체를 반환하게 만들어야했었는데,

const actionCreator = (payload) => ({type:"ACTION", payload})

 

이 미들웨어를 쓰면 꼭 객체를 리턴하는게 아니라, 함수를 반환하는 액션 생성자를 디스패치 할 수 있다고한다.

(아래의 incrementAsync를 디스패치 할 수있다는 뜻!)

 

형태는 다음과 같이 작성해야하는듯? (보면 함수안에서 함수를 반환하고있다!)

const incrementAsync = () => (dispatch) => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
}

그러니까 반환하는 함수의 argument가 dispatch를 포함하는 형태여야 하는것같다! (규칙? 인것 같다.)

책을 보니까 두번째 argument로 getState를 넘겨서 현재 상태를 참조할 수 도 있는것같다.

 

우리가 평소에 만들던 액션 생성자 함수는 반드시 객체를 해야했으니 액션을 디스패치 하는 과정에서 다른 작업들을 할 수 없었다.

 

이게 무슨말이냐면.. 내가 주관적으로 이해한 내용을 쭉 써보겠다.

 

우리가 redux 환경에서 디스패치를 할때 액션 생성자 함수를 이용해서 했었는데, 이때 객체를 반환하는 액션 생성자 함수를 이용하여 디스패치를 하면 액션 생성자 하나로 하나의 작업밖에 못했쥬?

 

그러니까 액션을 하나 디스패치하면, 딱 그 액션 하나에 관한 작업만 할 수 있었다는거!

 

근데 이 redux-thunk 라는 미들웨어를 사용함으로써 thunk 함수를 만들어서 디스패치 할 수 있게되고, redux-thunk 미들웨어가 thunk 함수를 전달받아 store의 dispatch와 getState를 arguments로 넣어서 호출해준다. 전달받은 dispatch와 getState를 가지고 thunk 함수 내부에서 여러가지 액션들을 dispatch 해 줄 수 있게되는것!!

 

즉 하나의 액션 생성자 함수로 여러개의 dispatch를 할 수 있게 되는것!!

 

 

여기까지가 오늘 내가 이해한 내용이다!

 

오늘 이 미들웨어를 처음 접했을 때 정말 넋이 나갈 것 같았다. 무슨 말인지 이해도 잘 안되고, thunk 함수가 connect 함수의 mapDispatchToProps 자리에있을때도 멘붕이 왔었다.

 

내가 알기론 여기는 객체를 반환하는 액션 생성 함수들의 자리인데 어째서 올수있는건지? 

 

엄청 당황했지만, react-thunk 미들웨어를 사용함으로써 허락된 자리라고 이해하기로 했다.

 

그래도 처음엔 아예 갈피조차 잡지 못했는데, 조금이라도 이해하고 지나가는것 같아서 다행이라고 생각한다.

 

계속 꾸준히 공부해나가다보면.. 이런 내용도 쉽게 이해할 수 있는 실력을 갖추게 되겠지..

 

화이팅 나 자신..