React Query - 2

훅 계층 구조

 

훅 계층 구조는 다음과 같이 나눌 수 있다.

쿼리 훅 계층에서는 React Query를 직접 호출하고 사용하며, 쿼리 키를 사용할 수 없다. queryClient 객체를 사용하는 곳은 이 곳 밖에 없다. 비즈니스 로직 훅 계층에서는 쿼리 훅 계층으로부터 반환되는 값으로 작성되는 비즈니스 로직들이 포함되는 영역이다. 쿼리 훅 계층으로부터 remote data 혹은 mutation 객체를 받아 컴포넌트에게 비즈니스 로직을 전달하는 역할을 수행한다. 컴포넌트 계층에서는 비즈니스 로직 훅 계층으로부터 비즈니스 로직을 전달받아 핸들러 코드를 만들어 컴포넌트에서 사용된다.

 

 

useMutation

 

서버에 데이터를 업데이트하도록 서버에 네트워크 호출을 실시한다. useMutation은 mutate 함수를 반환하며, 데이터를 저장하지 않기에 쿼리 키를 필요로 하지 않는다.

 

위치 : src/hooks/auth/usePostLogin.ts

import { useMutation } from "@tanstack/react-query";
import { postLogin } from "../../services";

export function usePostLogin() {
  return useMutation(["postLogin"], postLogin);
}

위치 : src/services/auth/postLogin.service.ts

import { axiosInstance } from "../../apis";

export interface PostLoginReq {
  email: string;
  password: string;
  loginKeep: boolean;
}

export interface PostLoginRes {
  accessToken: string;
  refreshToken: string;
  fcmStatus: boolean;
}

export function postLogin(data: PostLoginReq) {
  const res = axiosInstance.post<PostLoginRes>("/login", data);
  return res;
}

 

Dependent Queries

의존성 쿼리는 어떤 조건 하에서만 활성화가 된다. setQueryData는 실제로 캐시에 데이터를 설정하기 위함이고 removeQueries는 캐시에서 쿼리를 삭제하기 위함이다.

 

setQueryData

setQueryData는 다음과 같은 목적으로 사용된다.

 

- 데이터 캐시 업데이트

setQueryData를 사용하여 React Query 캐시에 데이터를 업데이트할 수 있다. 이를 통해 컴포넌트에서 해당 데이터를 즉시 사용할 수 있다.

 

- 캐시된 데이터 변경

비동기 데이터 가져오기 요청이 성공하면 setQueryData를 사용하여 해당 데이터를 업데이트할 수 있다. 이를 통해 UI가 실시간으로 업데이트되고 사용자 경험이 향상된다.

 

- 캐시된 데이터 삭제

setQueryData를 사용하여 캐시에서 데이터를 삭제할 수 있고, 이를 통해 더 이상 필요하지 않는 데이터를 정리할 수 있다. 

 

위치 : src/hooks/auth/useUser.ts

import { useQueryClient } from "react-query";

export interface AuthToken {
  accessToken: string;
  refreshToken: string;
  userEmail: string;
}

interface UseUser {
  token: AuthToken | null;
  updateUser: (token: AuthToken) => void;
  clearUser: () => void;
}

export function useUser(): UseUser {
  const token = null;
  const queryClient = useQueryClient();

  const updateUser = (token: AuthToken): void => {
    queryClient.setQueryData("token", token);
  };

  const clearUser = (): void => {
    queryClient.setQueryData("token", null);
  };

  return { token, updateUser, clearUser };
}

JWT는 클라이언트가 아이디, 비밀번호를 내보냈을 때 데이터베이스에서 일치한다면 서버가 토큰을 보내는 방식으로 작동한다. 위의 코드는 React Query를 사용하여 사용자 인증 토큰을 관리하는 커스텀 훅이다. React Query 캐시에 저장되어 있는 사용자 데이터를 객체로 반환하는 역할을 가지고 있다.

 

위치 : src/screens/auth/login/Login.screen.tsx

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { usePostLogin, useUser } from "../../../hooks";
import { PostLoginReq } from "../../../services";

import { DownCircleOutlined } from "@ant-design/icons";
import * as S from "./Login.styled";

export function LoginScreen() {
  const [form, setForm] = useState<PostLoginReq>({
    email: "",
    password: "",
    loginKeep: false,
  });
  const user = useUser();
  const login = usePostLogin();
  const navigate = useNavigate();

  const submit = () =>
    login.mutate(form, {
      onError: (error) => {
        console.log(error);
        alert("로그인에 실패하였습니다.");
      },
      onSuccess: (res) => {
        const userToken = {
          accessToken: res.data.accessToken,
          refreshToken: res.data.refreshToken,
          userEmail: form.email,
        };
        user.updateUser(userToken);
        navigate("/home");
      },
    });
    
    return (....);
 }