[Outsourcing_Day 3] HotPlace In Seoul 🔥 - tanstack query & custom hook

2025.02.28 (금) Works

 

1. DB 연결하기

- Tanstack Query

- custom hook

 

 

DB 연결하기

 

📍Tanstack Query

과제 필수 구현 사항 중 탠스택 쿼리를 이용하여 서버 상태를 관리해야 한다는 항목이 있다.

이번 프로젝트에는 supabase, 카카오 지도 API, 유튜브 API 를 사용한다.

 

사실 전체적으로 CRUD 중 R 외에는 크게 기능이 없기도 하고

supabase에 값을 수작업으로 넣어 준 고정 값이기 때문에 탠스택을 어디에 사용해야 하나 고민이 되었다.

 

조원끼리 대화를 나눠보며 '굳이 캐싱이 필요한 부분이 없지 않냐' 는 이야기가 나왔고 튜터님께 질문을 드렸다.

튜터님의 말씀에 따르면

탠스택은 특정 key(queryKey)를 기반으로 데이터를 가져온다.
이는 캐싱만이 목적이 아니며 pending과 error를 편리하게 처리할 수 있다.
이렇게 생각하면 쉽다 : 데이터 패칭을 관리하는 훅에 '캐싱'이라는 기능이 붙은 느낌
캐싱이 필요없다면 staleTime 이나 gcTime을 0으로 설정하여 새로고침이나 페이지가 바뀔 때마다 새롭게 데이터를 가져온다.
(화면 내부에서의 리렌더링이랑은 무관)

다만 카카오지도, 유튜브 특히 유튜브 API는 하루에 사용 횟수가 제한적이기 때문에 캐싱 데이터가 필요하나고 할 수 있다.

 

👇🏻기억해두면 좋을만한 자료

튜터님의 말씀을 듣고 supabase, 카카오지도, 유튜브 세 곳 모두 탠스택을 사용하기로 했다.

최상단 파일(main.jsx)에서 new QueeryClient 를 생성하는 것은

'이 프로젝트에서는 서버 상태 관리를 Tanstack Query 로 하겠다' 고 선언(?) 하는 것이나 마찬가지이다 ㅎㅎ

 

그렇다면 서로 다른 세 개의 서버 상태는 어떻게 구분해서 쓰나?

바로 queryKey를 다르게 주어 구분하는 것이다.

이 쿼리키에 따라 서버 상태를 캐싱, 리패칭, 무효화할 수 있는 것이다.

 

나는 핫플 리스트와 북마크 페이지를 맡았으니 supabase의 'hotplaces' 테이블의 값만 캐싱해오면 되는 것이다.

 // HotPlaceList.jsx
 
 // supabase에서 값 가져오기
 const HotPlaceList = () => {
    const getHotplaces = async () => {
      const { data, error } = await supabase.from('hotplaces').select('*');
      if (error) {
        throw new Error(error.message);
      }
      return data;
    };
  
  
  // useQuery 사용하기
    const {
      data: hotplaces = [],
      isPending,
      isError,
    } = useQuery({
      queryKey: ['hotplaces'],
      queryFn: getHotplaces,
    });

    if (isPending) {
      return <div>로딩 중...</div>;
    }
  
    if (isError) {
      <div>에러가 발생했습니다.</div>;
    }
  
  };
export default HotPlaceList;

 

 

 

📍custom hook

팀원들과 파일 구조를 정할 때 query는 페이지 안에 두기보다는 분리해서 관리하자는 이야기가 나왔다.

lib 폴더 > quries 폴더 내에서 파일로 관리하게 되었다.

 

그렇다면 위에 작성한 로직을 적절히 분리해야 한다.

바로 커스텀 훅을 사용하는 것이다!

queries 폴더 안에 있는 js 파일은 컴포넌트가 아닌 커스텀 훅이다.

 

이전에 커스텀 훅의 기본 원리에 대해 정리해 둔 글이 있다.

custom hook 정리글(클릭)

 

 

이번에 만든 커스텀 훅도 로직을 보며 정리해보겠다.

// GetHotplaces.js

import supabase from '@/lib/api/supabaseAPI';
import { useQuery } from '@tanstack/react-query';

export const useGetHotplaces = () => {
  const getHotplaces = async () => {
    const { data, error } = await supabase.from('hotplaces').select('*');
    if (error) {
      throw new Error(error.message);
    }
    return data;
  };

  return useQuery({
    queryKey: ['hotplaces'],
    queryFn: getHotplaces,
  });
};

우선 이 훅은 useQuery를 반환한다.
useQuery는 Key에 해당하는 이름으로 비동기 함수를 실행한 값을 캐싱한다.
비동기 함수 getHotplaces는 supabase에서 'hotplaces' 라는 테이블의 모든 값을 가져온다.

 

즉, 이 훅은 supabase에서 가져 온 핫플레이스의 정보를 캐싱한다.

 

 

// HotplaceList.jsx
const HotplaceList = () => {
  const { data: hotplaces = [], isPending, isError } = useGetHotplaces();

  if (isPending) {
    return <div>로딩 중...</div>;
  }

  if (isError) {
    return <div>에러가 발생했습니다.</div>;
  }
  
  return(
  ...

위에서 만든 커스텀 훅을 적용시키는 컴포넌트이다.

커스텀 훅이 반환하는 캐싱된 정보 중, 우리에게 필요한 세 가지를 구조분해할당으로 뽑아낸다.(data, isPending, isError)

 

data는 hotplaces라는 이름으로 초기값을 빈 배열로 지정한다. 이 배열로 리스트를 mapping 한다.

isPending은 state로 데이터를 불러오는 중일 때 return을 반환한다.

isError도 state로 에러 상황일 때 return을 반환한다.

 

 

+ 리스트 뿐만 아니라 북마크 페이지도 마찬가지로 커스텀 훅을 이용하여 관리한다.

 

[커스텀 훅]

// GetBookmarks.js

import supabase from '../api/supabaseAPI';
import { useQuery } from '@tanstack/react-query';

export const useGetBookmarks = () => {
  const getBookmarks = async () => {
    const { data, error } = await supabase.from('bookmarks').select('*, hotplaces(name, img_url)');
    if (error) {
      throw new Error(error.message);
    }
    return data;
  };

  return useQuery({
    queryKey: ['bookmarks'],
    queryFn: getBookmarks,
  });
};

 

 

[북마크 페이지]

// BookMark.jsx

const BookMark = () => {
  const { data: bookmarkList = [], isPending, isError } = useGetBookmarks();

  if (isPending) {
    return <div>로딩 중...</div>;
  }

  if (isError) {
    <div>에러가 발생했습니다.</div>;
    
    return(
    ...