29 lines
1.3 KiB
TypeScript
29 lines
1.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
// React Query는 브라우저 캐시를 다루므로 클라이언트 컴포넌트에서 사용합니다.
|
||
|
|
|
||
|
|
import { useQuery } from "@tanstack/react-query"; // 서버 상태를 캐싱/동기화하는 훅입니다.
|
||
|
|
import { getUsers } from "@/features/react-query-demo/api/userApi"; // 실제 API 호출 함수입니다.
|
||
|
|
import { User } from "@/features/react-query-demo/types"; // 타입 안정성을 위한 User 타입입니다.
|
||
|
|
import { userKeys } from "@/features/react-query-demo/api/queryKeys"; // 캐시 키 설계 규칙을 모은 객체입니다.
|
||
|
|
|
||
|
|
/**
|
||
|
|
* useUsers
|
||
|
|
* @description 사용자 목록을 가져오는 React Query 훅입니다.
|
||
|
|
* @returns 사용자 목록과 상태(isLoading/isError 등)를 반환합니다.
|
||
|
|
*/
|
||
|
|
export function useUsers() {
|
||
|
|
return useQuery<User[]>({
|
||
|
|
// queryKey는 캐싱의 기준이므로 목록용 키를 명확히 분리합니다.
|
||
|
|
queryKey: userKeys.lists(),
|
||
|
|
// queryFn은 실제 데이터를 가져오는 함수입니다.
|
||
|
|
queryFn: getUsers,
|
||
|
|
// 목록 데이터는 1분 동안 신선하다고 보고 재요청을 줄입니다.
|
||
|
|
staleTime: 1000 * 60 * 1,
|
||
|
|
// 창 포커스 복귀 시 자동 재요청을 끕니다(학습용으로 흐름을 단순화).
|
||
|
|
refetchOnWindowFocus: false,
|
||
|
|
// 네트워크 오류 시 한 번만 재시도합니다.
|
||
|
|
retry: 1,
|
||
|
|
});
|
||
|
|
}
|