[React-Query] useQuery 간단한 사용법 알아보기

 

이전 포스팅에서 React-Query란? 에 대해서 간단하게 알아봤습니다.

그래서 오늘은 안쓸 이유가 없는 React-Query의 찐!기초 사용법을 알아보려고 합니다.

 

우선 라이브러리를 설치해 줍니다.

npm i react-query

 

다른 파일들은 생성하지 않을꺼고 App.tsx에 간단하게 작성해보려고 합니다.

여기에서 사용할 Test API는 fake api 인 https://jsonplaceholder.typicode.com/guide/ 사이트를 참고합니다.

import React from 'react';
import { QueryClient, QueryClientProvider, useQuery } from "react-query";

const queryClient = new QueryClient();

...

우선 라이브러리에서 필요한 함수들을 불러와주고, QueryClient를 생성해줍니다.

여기서 사용되는 QueryClient 객체는 데이터를 캐싱하고 관리하는데 사용도는 중요한 객체입니다.

 

// fetch api function

const fetchTodos = async () =>
    axios.get("https://jsonplaceholder.typicode.com/todos", {
      params: {
        _limit: 10,
      },
    });

  const { isLoading, isError, data, error } = useQuery("getTodos", fetchTodos, {
    refetchOnWindowFocus: true,
    onSuccess: () => {
      console.log("데이터를 받아옴");
    },
  });

todos라는 api를 사용하고, params로 10개만 받아오게 설정한 api 호출 함수를 작성합니다.

그리고 data를 GET 할때 사용하는 useQuery를 작성해줍니다.

앞선 포스팅에서 useQuery에서 사용할 수 있는 옵션들이 여러가지 있지만 저는 refetchOnWindowFocus라는

해당 브라우저가 포커싱 됐을때 데이터를 또 새로받아온다는 것에 매우 매혹적이라 저것을 사용해보았습니다.

onSuccess는 데이터를 처리할수도 있고, 전 여기서 refetch가 정상적으로 작동이 되는지 확인해보기 위해 console을

찍어보았습니다.

 

// UI 부분

<div className="App">
  {isLoading ? (
    <div>로딩 중...</div>
  ) : isError ? (
    <div>에러 발생!</div>
  ) : (
    <div onClick={() => console.log(data)}>
      {data?.data.map((d: any, index: any) => {
        return (
          <div key={index}>
            <span>{d.id}</span>
            <span>{d.title}</span>
          </div>
        );
      })}
      sssss
    </div>
  )}
</div>

 

isLoading이라는 변수는 해당 함수의 api 호출 상태를 갖고 있습니다.

따라서 기존의 방식처럼 api의 진행현황 변수를 따로 생성하지 않고, 작성할 수 있습니다.

현재 typescript파일로 작성중이기 때문에 d와 index의 type은 간편하게 any로 작성해두었습니다.

"sssss" 부분은 api 호출된 데이터의 구조가 어떻게 생겼는지 확인해보기 위하여 클릭할 수 있도록 작성해놉니다.

 

// 전체 코드

import axios from "axios";
import React from "react";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";

const queryClient = new QueryClient();

function App() {
  const fetchTodos = async () =>
    axios.get("https://jsonplaceholder.typicode.com/todos", {
      params: {
        _limit: 10,
      },
    });

  const { isLoading, isError, data, error } = useQuery("getTodos", fetchTodos, {
    refetchOnWindowFocus: true,
    onSuccess: () => {
      console.log("데이터를 받아옴");
    },
  });

  return (
    <div className="App">
      {isLoading ? (
        <div>로딩 중...</div>
      ) : isError ? (
        <div>에러 발생!</div>
      ) : (
        <div onClick={() => console.log(data)}>
          {data?.data.map((d: any, index: any) => {
            return (
              <div key={index}>
                <span>{d.id}</span>
                <span>{d.title}</span>
              </div>
            );
          })}
          sssss
        </div>
      )}
    </div>
  );
}

function MyApp() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
}

export default MyApp;

 

 

 

실행 화면

 

콘솔창을보면 다른 부분을 클릭했다가 다시 컨텐츠가 있는 화면을 보게되면 refetch가 정상적으로 작동하는걸

확인할 수 있습니다.

 

 

다음 포스팅에서는 useMutation과 비롯한 다른 주요 기능들을 살펴보겠습니다.