[RQ(39)]useStaff를 위한 커스텀 훅

이유정·2024년 5월 7일
0

React-Query

목록 보기
23/30
post-thumbnail

// `useQuery`를 import하여 서버로부터 데이터를 가져오는 훅을 사용합니다.
import { useQuery } from "@tanstack/react-query";
// 상태 관리 훅을 import합니다.
import { useState } from "react";

// `Staff` 타입을 가져옵니다.
import type { Staff } from "@shared/types";

// 치료별로 데이터를 필터링하는 유틸리티 함수를 가져옵니다.
import { filterByTreatment } from "../utils";

// axios 인스턴스를 가져옵니다.
import { axiosInstance } from "@/axiosInstance";
// 리액트 쿼리 키 상수를 가져옵니다.
import { queryKeys } from "@/react-query/constants";

// 서버에서 직원 데이터를 가져오는 비동기 함수
async function getStaff(): Promise<Staff[]> {
  // axios 인스턴스를 사용하여 '/staff' 엔드포인트로 GET 요청을 보냅니다.
  const { data } = await axiosInstance.get('/staff');
  // 서버에서 받은 직원 데이터를 반환합니다.
  return data;
}

// 직원 정보를 가져오는 커스텀 훅
export function useStaff() {
  // 필터 상태를 관리하는 useState 훅
  const [filter, setFilter] = useState("all");
  // 하드코딩된 빈 배열을 fallback으로 선언합니다.
  const fallback: Staff[] = [];

  // TODO: useQuery를 사용하여 서버로부터 데이터를 가져옵니다.
  const { data: staff = fallback } = useQuery({
    // 쿼리 키를 사용하여 캐시를 식별합니다.
    queryKey: [queryKeys.staff],
    // 직원 데이터를 가져오는 함수
    queryFn: getStaff,
  });

  // 훅에서 필터 상태와 직원 데이터를 반환합니다.
  return { staff, filter, setFilter };
}
profile
강의 기록 블로그

0개의 댓글