시작하기 전에

본 글은 아래 환경 기준으로 작성되었습니다.

Next.js v14, TypeScript, Tanstack-Query v5

이전 글에서

이전 글에선 useQuery의 기본적인 사용법을 알아봤습니다. 이번 시간엔 useQuery로 사용된 부분을 Hook들로 전환한 내용에 대해 기술합니다.

Hook으로의 전환

useQuery를 Hook으로 전환해서 사용하기 위해 hooks 폴더 안에 queries 폴더를 생성하고, 그 안에 제 프로젝트에 맞춰 user, review, post, payment, chatroom, application 폴더를 생성하였습니다.

이제 각 폴더 안에 관련된 Hook들을 만들고 export만 해주면 끝이 납니다.

예를 들어, 이전 글에서 설명된 user 정보를 가져오는 Hook의 경우 (getUser) 아래와 같이 작업해주었습니다.

// hooks/queries/user/user.ts
import { getUserApi } from "@/apis/userApi";
import { IUser } from "@/interfaces/userIFC";
import { useQuery } from "@tanstack/react-query";

export const useGetUserQuery = () => {
    const {
        data: user,
        error,
        isPending,
    } = useQuery<IUser, Error, IUser, [_1: string]>({
        queryKey: ["user"],
        queryFn: getUserApi,
        staleTime: 60 * 1000,
        gcTime: 300 * 1000,
    });

    return { user, error, isPending };
};

전 api, interface 등을 모두 각각의 폴더에 저장합니다. 여기서 userIFC는 user와 관련된 type들을 모아둔 파일로, IUser는 제가 설계한 user 모델의 타입 정보를 담습니다.

이렇게 Hook으로 useGetUserQuery를 만들어 두면 user 정보를 불러와야 되는 component에서는 아래와 같이 코드만 작성하면 useQuery를 사용해 user정보를 불러온 것이 됩니다.

// navigation.tsx
import { useGetUserQuery } from '@hooks/queries/user/user';

export default function Navigation() {
  ~~~
  const { user, error, isPending } = useGetUserQuery();
  ~~~
}

useQuery를 하나의 공통으로 묶어 파라미터로 queryKey를 받을까도 고민해봤지만, 그것보단 Hook Name이 명확한 것이 더 나아보였습니다. 또한, 파라미터로 queryKey를 받을 경우 파라미터로 넘겨줘야 할 값이 꽤 많았기에 각각의 쿼리를 모두 Hook으로써 전환하기로 결정했습니다.

마치며

위와 같이 useGetUserQuery를 사용할 수도 있지만, 그냥 캐싱된 데이터만 가지고 오고 싶을 경우 전 useQueryClient().getQueryData 함수를 사용합니다. 하지만 이 경우, 코드가 짧고 아직 Hook으로의 필요성을 느끼지 못해 Hook으로는 빼놓지 않았지만 추후엔 아래와 같이 Hook으로도 뺄 수도 있지 않을까 싶습니다.

// hooks/queries/user/user.ts
'use client'

export default function useGetCachedUserQuery() {
  const queryClient = useQueryClient();
  return queryClient.getQueryData<IUser>(['user']);
}

물론 아직 테스트해보지는 않아서 에러가 날 수는 있으나, 사실 에러가 나지는 않을거라 생각합니다.

다음주엔 useMutation 을 열심히 설명해보겠습니다!