Must-Know Options란,
React Query를 사용할 때 꼭 알아야 하는 주요 옵션들이야! 이 옵션들은 데이터를 어떻게 가져오고, 캐싱하며, 새로고침할지 등을 설정하는 데 사용돼.
React Query의 똑똑한 데이터 관리를 위해 꼭 이해하고 활용해야 하는 옵션이지.
🔍 staleTime
- "데이터가 신선하다고 간주되는 시간"을 설정.
- 기본값: 0 (항상 오래된 데이터로 간주).
- 설정된 시간 동안 캐시 데이터를 "신선한 상태(fresh)"로 간주하므로, 서버 요청 없이 캐시 데이터를 바로 사용해.
- (예제)
const { data } = useQuery(['todos'], fetchTodos, { staleTime: 1000 * 60 }); // 1분🙌 쉽게 비유하자면: "음식이 상하지 않는 기간"과 같아, staleTime 동안은 데이터를 새로 가져오지 않고, 기존 데이터를 재사용해.
🔍 cacheTime
- "캐시 데이터를 유지하는 시간"을 설정.
- 기본값: 5분(inactive 상태에서 5분간 캐시 유지).
- 이 시간이 지나면 캐시삭제.
- (예제)
const { data } = useQuery(['todos'], fetchTodos, { cacheTime: 1000 * 60 * 10 }); // 10분🙌 쉽게 비유하자면: "냉장고에 음식을 얼마나 오래 보관할지"와 같아. cacheTime이 지나면 음식(데이터)이 삭제돼.
🔍 refetchOnMount
- 컴포넌트가 마운트될 때 데이터를 다시 가져올지 설정.
- 기본값: true(마운트 시 stale 데이터는 자동으로 새로고침).
- (예제)
const { data } = useQuery(['todos'], fetchTodos, { refetchOnMount: false });🙌 쉽게 비유하자면: 집에 돌아올 때마다 냉장고 문을 열어 음식을 확인할지"와 같아. false로 설정하면 마운트할 때 데이터를 다시 가져오지 않아.
🔍 refetchOnWindowFocus
- 브라우저가 포커스를 받을 때 데이터를 새로고침할지 설정.
- 기본값: true (브라우저로 돌아올 때 stale 데이터 새로고침).
- (예제)
const { data } = useQuery(['todos'], fetchTodos, { refetchOnWindowFocus: false });🙌 쉽게 비유하자면: "다시 방으로 돌아왔을 때 냉장고 문을 열어 음식을 확인할지"와 같아. false로 설정하면 브라우저로 돌아와도 데이터를 다시 가져오지 않아.
🔍 refetchOnReconnect
- 네트워크가 다시 연결되었을 때 데이터를 새로고침할지 설정.
- 기본값: true(재연결 시 자동 새로고침).
- (예제)
const { data } = useQuery(['todos'], fetchTodos, { refetchOnReconnect: false });🙌 쉽게 비유하자면: "인터넷이 끊겼다가 다시 연결되었을 때 데이터를 새로 확인할지"와 같아.
🔍 retry
- 데이터 요청이 실패했을 때 재시도 횟수를 설정.
- 기본값: 3 (최대 3번 재요청).
- (예제)
const { data } = useQuery(['todos'], fetchTodos, { retry: 2 }); // 2번만 재요청🙌 쉽게 비유하자면: "음식을 배달했는데 실패하면 몇 번까지 다시 배달 시도할지"와 같아. 요청이 실패했을 때, 자동으로 재시도해서 데이터를 가져오려고 노력.
🚀 진짜 쉬운 설명
✏️ 더 알아가기
enabled와 select란?
React Query의 옵션 중 하나로, 데이터를 가져오는 방식이나 쿼리의 동작을 세밀하게 제어하는 데 사용해.
-
enabled란?
쿼리를 활성화하거나 비활성화하는 옵션이야.
마치, "스위치"와 같아! enabled: false는 쿼리를 꺼두는 것이고, 특정 조건에서만 켜는거지.-
enabled:
false로 설정하면 쿼리가 자동으로 실행되지 않아. -
데이터 요청을 조건부로 실행하고 싶을 때 사용해.
(예) 특정 상태나 변수가 준비된 이후에 데이터를 가져오고 싶을 때. -
(예시)
-
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
function UserProfile({ userId }) {
const { data, isLoading } = useQuery(
['user', userId],
() => axios.get(`/api/users/${userId}`).then((res) => res.data),
{
enabled: !!userId, // userId가 있을 때만 쿼리 실행
}
);
if (!userId) return <p>사용자 ID가 필요합니다.</p>;
if (isLoading) return <p>로딩 중...</p>;
return <p>사용자 이름: {data.name}</p>;
}
//enabled: !!userId는 userId가 존재할 때만 쿼리 실행을 허용.
//사용자가 userId를 제공하지 않으면 서버 요청이 발생하지 않아.-
select란?
쿼리 응답 데이터를 변환할 수 있는 옵션이야.
마치, 필터링 작업과 같아! 서버에서 가져온 데이터를 전부 사용하지 않고, 필요한 부분만 골라서 사용하지.-
서버에서 가져온 원본 데이터를 사용자가 원하는 형태로 가공할 때 유용해.
-
서버에서 받은 데이터가 필요 이상으로 많을 때, 필요한 정보만 골라내고 싶을 때 사용해.
(예) 특정 상태나 변수가 준비된 이후에 데이터를 가져오고 싶을 때. -
(예시)
-
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
function UserProfile({ userId }) {
const { data, isLoading } = useQuery(
['user', userId],
() => axios.get(`/api/users/${userId}`).then((res) => res.data),
{
select: (data) => ({
name: data.name,
email: data.email,
}), // 필요한 데이터만 추출
}
);
if (isLoading) return <p>로딩 중...</p>;
return (
<div>
<p>이름: {data.name}</p>
<p>이메일: {data.email}</p>
</div>
);
}
//서버에서 가져온 데이터에 사용자가 원하는 가공 로직(select)을 적용.
//데이터 가공은 클라이언트에서 이루어지므로 서버 로직에 영향을 주지 않음.🎯 enabled와 select 차이
| 옵션 | 설명 | 주된 역할 |
|---|---|---|
enabled | 쿼리가 실행될 조건을 설정. 조건이 충족되지 않으면 쿼리 실행 안 됨. | 쿼리 실행 여부 제어 |
select | 서버에서 가져온 데이터를 원하는 형태로 변환. | 데이터 가공 및 필터링 |
- enabled: 쿼리 실행 여부를 조건부로 제어.
- select: 서버에서 가져온 데이터를 가공해서 필요한 데이터만 반환.
