Tanstack을 활용한 리액트 쿼리(React query) 사용법

리액트 쿼리를 사용하기 위해서 Tanstack 쿼리를 사용한다.

Tanstack 쿼리는 HTTP 요청을 처리하고 프론트엔드사용자 인터페이스를 백엔드 데이터와 동기화된 상태로 유지하는데 이용하는 라이브러리이다. 

npm i @tanstack/react-query

HTTP 요청 작업에 있어 반드시 Tanstack 쿼리가 필요한 것은 아니다. useEffect나 fetch 함수로도 이러한 작업이 가능하다.

다만 아래의 이유로 리액트 쿼리를 사용하면 보다 심플하게 기능 구현이 가능하다.

• useQuery 훅은 자체 작동을 통해 HTTP 요청을 전송하고 섹션에 필요한 이벤트 데이터를 가져온다,
• 로딩 상태에 대한 다양한 메서드 및 추가 정보를 제공한다.
•  쿼리 키와  동일한 요청을 전송하면 이전 요청의 응답에 대해 재사용이 가능하다

Tanstack 쿼리에는 HTTP 요청을 전송하는 로직이 내장되어 있지 않다. 대신 요청을 관리하는 로직을 제공한다. 즉 요청과 관련된 데이터와 발생가능한 오류를 추적하는 역할 등을 하는 것이다.

예시 코드는 다음과 같다.

export async function fetchEvents() {
    const response = await fetch('http://localhost:3000/events');

    if (!response.ok) {
      const error = new Error('fetch 실행에 오류 발생');
      error.code = response.status;
      error.info = await response.json();
      throw error;
    }

    const { events } = await response.json();

    return events;
  }

요청을 전송하는 코드는 직접 작성해야 한다. 본 예제에서는 내장함수인 fetch로 요청을 전송하였지만 axios를 이용할 수도 있다. useQuery 는 프로미스를 반환하는 함수를 필요로 하므로 아래의 위치에 import 하면 된다

  useQuery({
    queryFn: fetchEvents// 실제 요청을 전송할때 실행할 실제 코드를 정의하는 것
  });

여기에 추가적인 코드를 작성해야 한다. 이때 등장하는 것이 queryKey이다.

queryKey는 모든 쿼리, 즉 전송하는 모든 GET HTTP 요청에는 쿼리 키가 있다. 리액트 쿼리 내부에서 이 키를 이용해 요청으로 생성된 데이터 캐시처리한다. 그래서 나중에 키와  동일한 요청을 전송하면 이전 요청을 재사용할 수 있다.

리액트 쿼리에서 데이터를 저장하고 재사용하는 기간도 구성할 수 있다. 즉, 먼저 작성된 응답이라면 다시 가져올 필요가 없다. 이는 사용자로 하여금 더 빠른 응답을 제공 해주는 셈이다. 그래서 모든 쿼리에는 이러한 키가 필요하다.

 const { data, isPending, isError, error } = useQuery({ // data에는 실제 응답 데이터가 값으로 들어있다.
    queryKey:['events'], // 이 값은 사용자 재량으로 정할수 있다.
    queryFn: fetchEvents// 실제 요청을 전송할때 실행할 실제 코드를 정의하는 것
  }); //이 훅은 자체적으로 작동해서 HTTP 요청을 전송하고 이 섹션에 필요한 이벤트 데이터를 가져오고 로딩 상태에 대한 정보를 제공

위와 같이 설정하면 useQuery 설정이 완료된다. 

useQuery는 객체 구조 할당을 통해 다양한 값을 반환하는데 그중 대표적인 것이 data이다. data 프로퍼티에는 실제 응답 데이터가 값으로 들어있다. 이 데이터는 커스텀한 fetch 함수를 통해 반환된다. 물론 즉각적으로 이뤄지진 않는다. 그래서 이 객체는 다음의 값을 갖는다.

• `isPending` : 요청이 여전히 실행중인지 응답을 받았는지 상태를 주는 것.
• `isError`: Data가 오류 응답을 받은 경우 True
• `error`: Data가 에러 상태인 경우 에러 메시지 return

리액트 쿼리를 사용하려면 client 단의 app.js에서 마지막 추가 작업이 필요하다.

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


const router =  // router 처리 필요
const queryClient = new QueryClient();

function App() {
  return <QueryClientProvider client={queryClient}><RouterProvider router={router} /></QueryClientProvider> 
}

export default App;

 

다음과 같이 queryClientProvider 및 queryClient 할당을 해주면 모든 작업이 끝나게 된다.