React Query - 시작하기

제공하는 기능들

• React Query는 서버 상태를 관리하기 위해 아래와 같은 다양한 기능들을 지원한다.

  • 로딩 및 에러 처리
  • 페이지네이션 / 무한 스크롤
  • 데이터 요청
  • 데이터 사전 요청(Prefetching)
  • 데이터 수정 및 업데이트(Mutations)
  • 중복 요청 제거
    • 기존의 쿼리가 출력되는 동안 다른 컴포넌트에서 중복 요청이 일어나면 중복 요청을 제거한다.
  • 서버 요청 에러 재시도(Retry)

사용 방법

1. Query client 생성

쿼리들과 캐시를 관리하는 클라이언트

2. QueryProvider 적용

자식 컴포넌트들의 캐시와 클라이언트의 기본 설정값을 제공
query client에 값으로 적용

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

function App() {
  return (
    // provide React Query client to App
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>Blog Posts</h1>
        <Posts />
      </div>
    </QueryClientProvider>
  );
}

3. Hook 사용

useQuery를 기본적으로 데이터 패칭에 사용

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

import { PostDetail } from "./PostDetail";


//데이터를 요청해 캐싱할 값을 반환하는 함수
async function fetchPosts() {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/posts?_limit=10&_page=0"
  );
  return response.json();
}

export function Posts() {
  //인자 1: 쿼리 키 배열, 2: 비동기 데이터 요청 함수
  const { data, isLoading } = useQuery(["posts"], fetchPosts);

  if (isLoading) {
    return (
      <div>로딩 중</div>
    )
  }
  
  if (isError) {
    return <div>에러가 발생했습니다.</div>;
  }
  
  return (
    <>
      <ul>
        {data.map((post) => (
          <li
            key={post.id}
            className="post-title"
          >
            {post.title}
          </li>
        ))}
      </ul>
    </>
  );
}

• 여기서 중요한 점!

  • 비동기인 useQuery의 데이터 요청은 당연하지만 data를 undefined로 반환한다.
  • 렌더링 시점이 요청을 받아오는 속도보다 빠르므로 기본 제공해주는 isLoading을 사용해 데이터를 받아오는 중에는 로딩중을 조기 반환해줬다.
  • 에러 처리 또한 같은 방법으로 해줬다.

• 참고 사항

  • isFetching과 isLoading과의 차이점
    • isFetching: 아직 Axios, Fetch 등 요청이 끝나지 않았음. 더욱 포괄적인 개념.
    • isLoading: isFetching의 상태에서 캐싱된 데이터도 없는 상태를 의미함.
      페이지네이션에서는 캐싱된 데이터가 존재하는지 여부가 중요하기도 함
  • Retry 속성
    • 기본적으로 queryClient는 디폴트 값으로 retry를 3회 시도하도록 설정되어있다.
      그러므로, isError에서 에러가 발생 시, 데이터를 가져오기 위해서 3회를 자동으로 재요청을 보낸다.
  • error
    • isError 외에도 구체적인 에러를 표시해주는 error, onError도 구조분해할당으로 사용이 가능하다.
  • 어? 다른 작업하다가 왔는데 왜 다시 데이터를 가져올까?

    const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: true,
      },
    },
    })

    그건 사용자가 윈도우 창을 집중해 사용할 때, 다시 데이터를 요청하는 옵션이 디폴트로 true로 설정된 상태이기 때문이다.