[React] TanStack Query 3. useQuery 옵션

import { useQuery} from '@tanstack/react-query';
import { useState } from 'react';

const TodoList = () => {
  const [isEnabledQuery, setIsEnabledQuery] = useState(false);

  const { data, isPending, isFetching, refetch, isError, error } = useQuery({
    queryKey: ["todoList"], // 각 쿼리를 식별하기 위해 사용하는 고유 한 값
    queryFn: async () => {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/todos"
        // "https://jsonplaceholder.typicodeccc.com/todos" // 에러 발생용 주소
      );
      return await response.json();
    },
    retry: false, // true : 실패 시 무한으로 재시도
    // enabled: isEnabledQuery, // 쿼리 자동 실행 여부 , 기본값 true
    // refetchInterval: 3000, // 실시간 데이터가 필요한 경우 사용
    // refetchOnWindowFocus: false, // 브라우저 창이 다시 포커스를 얻었을 때 쿼리를 자동으로 다시 실행할지 여부를 제어, 기본값 true
    staleTime: 0,
    gcTime: 5 * 60 * 1000 // default: 5 * 60 * 1000(5분) Garbage Collection Time -
  })

  if (isError) {
    return "에러 발생 : " + error.message;
  }

  return (
    <>
      <p>isPending: {isPending ? "isPending...." : "완료"}</p>
      <p>isFetching :{isFetching ? "isFetching...." : "완료"}</p>

      <button
        onClick={() => setIsEnabledQuery(true)}
        style={{ backgroundColor: "#007BFF", color: "white"}}
      >조회하기</button>
      <hr style={{ margin: "15px 0" }} />
      <button
        onClick={() => {refetch()}}
        style={{ backgroundColor: "#007BFF", color: "white"}}
      >refetch</button>
      <ul>
          {data?.map(item => (
            <li key={item.id}>{item.title}</li>
          ))}
      </ul>
    </>
  );
};

export default TodoList;

• 에러 발생
  

• retry: React Query는 기본적으로 실패 시 무한 재시도(retry: true)
  

• enabled
  : 쿼리를 자동 실행할지 여부를 결정
  : default true → 컴포넌트 마운트 시 바로 실행
  : false → 최초 실행을 막고, 필요할 때만 실행하도록 제어

• refetchInterval
  : 일정 간격마다 자동으로 재조회
  : 실시간 데이터가 필요한 경우 사용

• refetchOnWindowFocus : true
  : default true → 다시 포커스 얻으면 refetch,
  : 데이터가 오래되었(stale) 을 때만 실행됨
  : 상태(fresh)라면 실행 안 함

• refetchOnWindowFocus : false
  : 비활성화 (다시 포커스해도 재조회 안 함)

• refetchOnWindowFocus : "always"
  : 무조건 refetch 실행
  : 데이터가 최신(fresh) 상태여도 강제로 재조회

→ 처음에 데이터를 받아오면 fresh 상태
→ 타임이 지나면 stale 상태 (staleTime 만료)

• staleTime
  : 데이터가 신선(fresh) 하다고 간주되는 시간
  : staleTime 동안은 refetch(재조회)가 일어나지 않음
  : fresh한 데이터는 네트워크 요청없이 캐시 된 데이터를 재사용

• gcTime (Garbage Collection Time)
  : default 5 60 1000(5분)
  : 메모리에 있는 캐시된 데이터가 가비지 컬렉터에 의해 자동으로 제거 되기 전까지의 시간 -> 캐시가 메모리에 '머무르는' 기간(이후 자동 삭제)
  : gcTime이 지나면, 캐시는 가비지 컬렉터에 의해 삭제됨
  : 단, 삭제 전까지는 staleTime 여부에 따라 refetch 여부가 달라짐

• 실전 설정 Tip

• staleTime을 길게 잡는 경우
  : 변경이 드문 데이터 (예: 코드 목록, 설정값 등)
  : 네트워크 트래픽을 줄이고 싶을 때

• staleTime을 짧게 잡는 경우
  : 실시간성이 중요한데이터(예: 주식, 알림 등)
  : 항상 최신 데이터가 필요할 때

• gcTime을 길게 잡는 경우
  : 자주 재사용되는 데이터
  : 화면 전환이 많고, 빠른 렌더링이 중요한 경우
  : staleTime 과 동일하거나 더 길게 설정하는 것이 일반적

• gcTime을 짧게 잡는 경우
  : 메모리 사용을 최소화 하고 싶을 때
  : 불필요한 데이터가 메모리에 오래 남지 않게 하고 싶을 때