[ React ] useQuery 와 useMuataion를 활용한 기능개선

 

💡 들어가기

어떤 경우에 useQuery와 useMutation 사용하는지,

또 타입 지정의 방식은 어떻게 이루어지는지 살펴보면서 기능개선을 한 작업을 바탕으로 해당 내용을 공유하려 한다.

---

 

✅ useQuery

react 개발자라면 모두가 알고 있는 fetching, caching, 서버 데이터와의 동기화를 지원하는 라이브러리일 것이다.

useQuery의 데이터 타입은 아래와 같다.

export declare function useQuery<
	TQueryFnData = unknown, 
    TError = unknown, 
    TData = TQueryFnData, 
    TQueryKey extends QueryKey = QueryKey>
    (queryKey: TQueryKey, queryFn: QueryFunction<TQueryFnData, TQueryKey>, 
    options?: Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 
    'queryKey' | 'queryFn' | 'initialData'> & {
    initialData?: () => undefined;
}): UseQueryResult<TData, TError>;

 

• TQueryFnData 👉  useQuery 로 실행하는 query function의 return 값을 정하는 제네릭 타입
• TError 👉 query의 error 형식을 정하는 제네릭 타입
• TData 👉 data에 담기는 실질적 type, query function의 데이터를 2차 가공하는 경우 사용하는 타입
• TQueryKey 👉 useQuery의 첫 번째 인자로 주는 queryKey의 타입

 

 

쿼리키의 경우에는 아래와 같이 타입 지정이 가능하다. 

type QueryKey = string | readonly unknown[];
// queryKey는 string 혹은 array 형식
// 하지만 query function에 전달 방식은 항상 array 형식으로 전달
// string => [string]

 

그래서 querykey의 타입을 각 배열마다 어떤 값이 들어갈지 명시적으로 지정해주고 function에 넘겨주고 싶다면 아래처럼 사용할 수 있다.

useQuery<
    unknown,
    ErrorType,
    void,
    // ✅ query key 순서대로 타입 지정하기
    [string, string, number | undefined]
  >

 

 

복수의 쿼리키에 대응해서 query key의 타입을 지정할 수 있다.

---

 

✅ useMuataion

useMutation을 통해 data를 POST, PUT, UPDATE, DELETE 할 수 있다. 

이를 통해 값을 변경할 때 사용할 수 있으며, useQuery와는 다르게 첫 번째 파라미터로 비동기 함수가 들어가고, 두 번째 파라미터로 상황 별 분기 설정이 들어간다는 것이 차이점이다.

 

useMutation의 타입을 살펴보면 아래와 같다. 

export declare function useMutation<
  TData = unknown,
  TError = unknown,
  TVariables = void,
  TContext = unknown,
>(
  options: UseMutationOptions<TData, TError, TVariables, TContext>,
): UseMutationResult<TData, TError, TVariables, TContext>;

 

• TData 👉 mutation 비동기 함수 실행 결과 타입, onSuccess, data로 활용
• TError 👉 mutation 비동기 함수 에러 결과 타입, onError, error로 활용
• TVariabales  👉 mutate 함수에 전달하는 인자를 지정하는 generic 타입
• TContext  👉 mutate 비동기 함수 실행 전에 수행되는 onMutate callback의 리턴 타입

 

이렇게 query와 mutation 내부의 타입을 명확하게 지정하면, onSuccess / onError / mutate 등등 분기별로 데이터를 다룰 때 

명확한 타입으로 비즈니스 로직을 수행하게 된다.

 

즉, 비동기 상태들의 타입 안정성을 보장할 수 있는 것이다.

자세한 타입 예제들은 React query - 공식 홈페이지를 참고하길 바란다.

---

 

🌟 새로운 웹 환경 로그인 알림 개선 작업

중고나라 웹로그인 알림톡 개선사항 작업으로 강제 로그아웃 페이지를 분할하면서 useQuery와 useMutation의 분기처리를 함께 작업하였다. 

📍문제 상황

중고나라 웹 거래 기능 오픈 당시, 중고나라 웹 사이트에 로그인을 시도하면 카카오톡으로 알림톡이 발송되는 기능을 오픈하였다.

하지만, 어떤 상황에서도 단순히 웹 로그인만 진행한다면 알림톡이 발송되었기에 하루 약 1300건 전송되는 문제가 발생하였다.

 

이는 사용자에게 불편함을 가져다주는 것과 동시에 과비용까지 발생하는 결과를 초래했다.

 ⏳ 플로우

해당 문제를 개선한 방법은 다음과 같다.

1. 앱 설치 여부를 판단하여 앱 푸시로 웹 로그인 알림 전송 진행
2. 앱 푸시 요청에 성공시, 해당 로그인 시간 표시 후 버튼 이벤트로 로그아웃 요청 처리
3. 앱 푸시 요청에 실패
   1. 최근 접속 기록 5건 체크
   2. 현재 로그인한 접속 정보와 이력이 다르다면, 알림톡 전송 
   3. 같다면, 알림톡 미전송

따라서 상황은 두 가지로 나눠지게 되었다. 

알림톡 / 앱푸시 분기처

 

1. 알림톡으로 강제 로그아웃 시키기  👉 user seq만 params으로 들어옴
   • 알림톡 내부의 로그아웃 버튼 클릭
   • 중고나라 웹사이트로 이동되면서 강제 로그아웃 진행 or 로그인 만료 안내
   • 홈으로 이동
2. 앱푸시로 로그인 시간 확인 후 강제 로그아웃 시키기 👉 user seq, date가 params으로 들어옴
   • 앱푸시 알림 클릭 
   • 외부 브라우저로 웹이 열리면서 로그인한 시간 안내 및 로그아웃 버튼 노출
   • 해당 버튼 클릭시, 로그아웃 or 로그인 만료 진행
   • 홈으로 이동

 

여기서 로그아웃을 진행하는 api 호출 경로는 동일하다.

다만, 1번의 경우 웹페이지로 들어오자마자 통신 요청이 진행되어야 하고 2번의 경우에는 로그아웃 버튼 클릭 이벤트로 통신 요청이 진행되어야 하다는 것이 차이점이었다.

 

🔥  시행 착오 /  해결 방법

내가 생각했던 첫 번째 해결방법은

같은 페이지 내에서 params의 date의 존재 여부로 해당 api에 대한 호출을 제어하는 방법

 

로그아웃을 진행하는 api를 호출할때, useQuery를 사용하였기에 해당 조건으로 분기처리를 하여 모달을 제어하는 것은 가능하긴 했다.

 

❗️ 다만, useQuery안에서의 조건 분기 & onSuccess에 대한 분기처리 & 로그인 만료 모달 분기처리 등등 ❗️

한 페이지 내에서 너무 많은 조건 분기가 이루어지는 것에 대한 불편함과 쿼리 안의 비즈니스 로직 분리의 까다로움으로 해당 방법을 시도하다가 잘못됨을 깨닫게 되었다.

 

그래서 두 번째 해결 방법으로 다음이 도출되었다.

페이지를 분리하여 1번은 useQuery로, 2번은 useMutation을 활용하여 api 호출을 제어하는 방법

 

1번의 경우, 페이지 진입시 자동으로 useQuery를 호출하여, 강제 로그아웃 결과 값을 사용자에게 보여준다.

2번의 경우, params으로부터 date를 가져와 해당 로그인 시간을 사용자에게 보여주고, button의 이벤트로 mutate를 작동시킬때

강제 로그아웃을 시킨후 메인으로 이동한다.

 

위의 방법으로 웹 로그인 알림 기능을 개선하였다.

🖥️ 코드 리팩토링

이에 대한 작업을 진행하면서, 앞서 언급했던 useQuery, useMutation의 타입을 정확하게 지정하는 방식을 통해 안정성을 강화시켰다.

 

먼저, 타입 지정의 전 useMutation을 살펴보자.

export const useLogoutAppPushMutaion = (
  key: string,
) => {

  return useMutation(
    ['app-push-logout', userKey],
    () => {
      return postLogOut(userKey);
    },
    {
      onSuccess: () => {
      	...
      },
      onError: (err) => {
      			// ❗️ err는 unknown형식입니다.
        const errorMeta = err.response.data.meta;
        ...
      },
    },
  );
};

 

앞서 포스팅한 [ 리액트 개발에서 반드시 알아야하는 JS - Typescript ] 에서도 알 수 있듯이 unknown타입을 사용하기 위해서는 타입 좁히기가 필요하다. 따라서 err에 대한 타입 좁히기 이전에는 해당 객체의 프로퍼티에 접근하는 것이 불가능하다.

 

해당 문제는 타입지정을 통해 빠르게 해결 가능하다.

다음을 살펴보자.

export const useLogoutAppPushMutaion = (
  key: string,
  			// ✅ ErrorType을 지정
): UseMutationResult<unknown, ErrorType, void>  => {

  return useMutation(
    ['app-push-logout', userKey],
    () => {
      return postLogOut(userKey);
    },
    {
      onSuccess: () => {
      	...
      },
      onError: (err) => {
      	// ✅ err의 type 👉 ErrorType
        const errorMeta = err.response.data.meta;
        ...
      },
    },
  );
};

 

mutation의 타입을 정확하게 지정해줌으로써 onError가 반환하는 err 객체에 타입 좁히기 없이 바로 ErrorType의 프로퍼티로 접근이 가능해졌다.

 

🌈 정리하기

그동안 react query의 기능만을 사용할 뿐, 정확한 타입지정 없이 개발했던 것이 안정성에 취약했다는 것을 새롭게 알게 되었다.

해당 특징을 웹사이트에 적용시켜 캐싱 뿐만 아니라 안정성을 높인 사이트로 만들어가보려고 한다.