AsyncThunk를 쓰게 된 계기

2022.10.31 - [분류 전체보기] - 파이널 프로젝트 후기 -1-

내가 프로젝트를 하면서 생겼던 의문

Q. API Post나 Get 요청들을 보통 Store의 액션에 지정해놓고 쓰나요? 아니면 컴포넌트에 바로 Axios를 이용해서 쓰나요??

• A. 컴포넌트에서는 해당 Action을 호출하기만 해야하고 직접 API를 호출할 필요가 없다!
• AsyncThunk 를 이용하여 axios 를 이용하여 비동기적으로 API를 호출할 수 있다.

저는 왜 이런 고민을 하고 질문을 했냐면

백엔드분이랑 카카오 로그인을 진행하기로했었는데 카카오 로그인 같은경우는 카카오로그인을 누르면 카카오서버를 통하여 로그인을 한 후 "인가 코드" 를 받아 이 인가코드를 이용하여 유저정보를 받을수있는 "카카오토큰" 을 받아야합니다. 이후 카카오토큰을 서버에 보내서 백엔드서버에서 자체적으로 생성한 토큰을 받아 저장해야합니다.

제가 처음에 생각했던 방식은

1. 카카오 로그인 인가코드를 받는 컴포넌트 

2. 인가코드를 이용하여 카카오토큰을 받는 컴포넌트

3. 카카오토큰을 백엔드서버에 보내서 백엔드가 발급해준 토큰을 받아온후 저장

 

AsyncThunk 를 사용한후 로직

1. 카카오 로그인 인가코드를 받아 AsyncThunk 를 이용하여 바로 카카오 토큰을 발급받는다

2. 이후 AsyncThunk 안에서 응닶값이 성공이라면 다시 AsyncThunk를 이용하여 카카오토큰을 백엔드에 보내고 백엔드 토큰을 발급받는다.

 

기존 2,3 과정을 거쳐 받아와야 하는 컴포넌트를 한 컴포넌트안에서 AsyncThunk를 이용하여 한 컴포넌트안에서 처리를 할 수 있게끔 하였다.

* 좀 더 관심이 있는 분은 공식문서를 참고하시길 바랍니다.
https://redux-toolkit.js.org/api/createAsyncThunk