[React] API 요청 관리 React-Query => Redux-Saga

포텐데이로 진행했던 프로젝트 코드를 리팩토링 중
프로젝트 진행 당시에는 API 요청을 React-Query로 관리했는데, 이번에 Redux-saga를 배우면서 한번 사용해보고 싶었다. 그래서 프로젝트 코드 내부 카카오 로그인 파트를 saga로 리팩토링했다.

React-Query

//Login.page.tsx
onClick={emailChecked ? getKakaoUrl : emailRequest}

//KakaoLogin.page.tsx
const mutation = useMutation(kakaoLogin, {
    onSuccess: () => {
      setTimeout(() => navigate("/home"), 2000);
      dispatch({ type: "USER_LOG_IN", payload: true });
      dispatch({ type: "EMAIL_CHECKED", payload: true });
    },
    onError: (status: any) => {
      if (status.response.status === 403) {
        alert("로그인에 실패하였습니다. 재시도해 이메일 수집에 동의해주세요. ");
        dispatch({ type: "EMAIL_NOT_CHECKED", payload: false });
        navigate("/");
      }
    },
  });

Redux-saga

//Login.page.tsx
onClick={() => dispatch(kakaoLoginStart())}

//KakaoLogin.page.tsx
const confirmLogin = async () => {
    const params = new URLSearchParams(search);
    const code = params.get("code");
    if (code) {
      dispatch(confirmLoginWithCode(code));
      dispatch({ type: "EMAIL_CHECKED", payload: true });
      dispatch({ type: "USER_LOG_IN", payload: true });
    }

    if (userStatus && emailChecked) {
      setTimeout(() => navigate("/home"), 2000);
    } else {
      alert("로그인에 실패하였습니다. 재시도해 이메일 수집에 동의해주세요. ");
      navigate("/");
    }
  };

  useEffect(() => {
    confirmLogin();
  }, []);


//login-saga.tsx
import { takeLatest, put, all, call } from "redux-saga/effects";
import createAction from "../../utils/action-creator";
import { LOGIN_ACTION_TYPES } from "./login.types";
import {
  emailRequest,
  getKakaoUrl,
  kakaoLogin,
} from "../../api/kakaoLogin.api";
import { kakaoLoginSuccess } from "./login.action";

export function* getKakaoLoginUrl() {
  try {
    yield call(getKakaoUrl);
  } catch (error) {}
}

export function* kakaoLoginConfirmWithCode(code: any) {
  try {
    yield call(kakaoLogin, code);
    yield put(kakaoLoginSuccess());
  } catch (error) {
    //error가 403인 경우에만 실행되도록 수정
    yield call(emailRequest);
  }
}

export function* onKakaoLoginStart() {
  yield takeLatest(LOGIN_ACTION_TYPES.LOGIN_START, getKakaoLoginUrl);
}

export function* onConfirmLogin() {
  yield takeLatest(LOGIN_ACTION_TYPES.CONFIRM_LOGIN, kakaoLoginConfirmWithCode);
}

export function* loginSaga() {
  yield all([call(onKakaoLoginStart)]);
}