React Query 심화 - 캐싱 전략과 무한 스크롤, 에러 핸들링 | 백틱

reactreact-querynext.js

React Query 심화 - 캐싱 전략과 무한 스크롤, 에러 핸들링

강경원

강경원· 2026년 1월 24일· 읽는 데 약 5분

조회 0

React Query는 클라이언트에서 서버 상태(데이터)를 관리하는 데 특화된 라이브러리입니다.
이 글에서는 기본 useQuery/useMutation에서 한 단계 나아가, 캐싱 전략, 무한 스크롤, 에러 핸들링을 중심으로 정리합니다.

1. 캐시 전략: staleTime, cacheTime

const { data, isFetching } = useQuery({
  queryKey: ["posts"],
  queryFn: fetchPosts,
  staleTime: 1000 * 60, // 1분 동안 fresh
  cacheTime: 1000 * 60 * 5, // 5분 동안 메모리에 유지
});

staleTime: 이 시간 동안은 데이터를 “신선(fresh)”하다고 보고,
같은 컴포넌트가 마운트되어도 다시 요청하지 않습니다.
cacheTime: 컴포넌트에서 더 이상 쓰지 않더라도, 이 시간 동안은 캐시로 남겨뒀다가 재사용합니다.

리스트 페이지처럼 “자주 왔다 갔다 하는 화면”은 staleTime을 적당히 길게 두면 사용자 경험이 좋아집니다.

2. prefetch와 초기 데이터

2-1. 미리 가져오기(prefetch)

queryClient.prefetchQuery({
  queryKey: ["post", postId],
  queryFn: () => fetchPost(postId),
});

사용자가 상세 페이지로 이동할 것이 거의 확실한 상황이라면, 미리 데이터를 가져와서 체감 속도를 높일 수 있습니다.

2-2. initialData 활용

const { data } = useQuery({
  queryKey: ["post", post.id],
  queryFn: () => fetchPost(post.id),
  initialData: post, // 리스트에서 이미 갖고 있는 데이터
});

리스트 → 상세 화면으로 이동할 때, 리스트에서 이미 일부 데이터를 들고 있다면 initialData로 먼저 보여주고 나서 최신 데이터를 fetch하는 패턴이 유용합니다.

const {
  data,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage,
} = useInfiniteQuery({
  queryKey: ["posts", "infinite"],
  queryFn: ({ pageParam = 0 }) => fetchPosts({ cursor: pageParam }),
  getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
});

return (
  <>
    {data?.pages.map((page, i) => (
      <Fragment key={i}>
        {page.items.map((post) => (
          <PostItem key={post.id} post={post} />
        ))}
      </Fragment>
    ))}

    <button
      disabled={!hasNextPage || isFetchingNextPage}
      onClick={() => fetchNextPage()}
    >
      {isFetchingNextPage ? "불러오는 중..." : hasNextPage ? "더 보기" : "끝"}
    </button>
  </>
);

const queryClient = useQueryClient();

const { mutate } = useMutation({
  mutationFn: toggleLike,
  onMutate: async (postId: number) => {
    await queryClient.cancelQueries({ queryKey: ["post", postId] });

    const prev = queryClient.getQueryData<Post>(["post", postId]);

    if (prev) {
      queryClient.setQueryData<Post>(["post", postId], {
        ...prev,
        liked: !prev.liked,
        likeCount: prev.likeCount + (prev.liked ? -1 : 1),
      });
    }

    return { prev };
  },
  onError: (_error, postId, context) => {
    if (context?.prev) {
      queryClient.setQueryData(["post", postId], context.prev);
    }
  },
  onSettled: (data, error, postId) => {
    queryClient.invalidateQueries({ queryKey: ["post", postId] });
  },
});

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      onError: (error) => {
        console.error("Query Error", error);
      },
    },
  },
});