반응 쿼리 시작하기

반응 쿼리란 무엇입니까? React Query는 모든 종류의 비동기 데이터에 대한 상태 관리 기능을 제공하는 라이브러리입니다.

React 자체는 데이터 가져오기 방법을 사용할지 여부에 대한 의견을 제시하지 않았습니다. React-Query를 사용하면 개발자가 수행할 필요가 없는 작업이 있습니다. (예: 로딩 상태, 오류 상태 유지 등)


React Query에는 인상적인 기능 목록이 있습니다.

캐싱

동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거

백그라운드에서 '오래된' 데이터 업데이트(오래된 데이터 제공 및 백그라운드에서 다시 가져오기, 재시도)

페이지 매김, 지연 로드와 같은 성능 최적화

쿼리 결과 메모하기

데이터 미리 가져오기

낙관적 변경을 쉽게 구현할 수 있는 돌연변이

이 기사에서는 react-query를 사용하여 api에서 데이터를 가져오는 방법에 대해 설명합니다.

React-Query는 데이터를 가져오기 위해 'useQuery'라는 사용자 지정 후크를 제공합니다. 그 아래에는 오류, 로딩 상태 및 모든 것과 같은 데이터 가져오기에 대한 더 많은 정보가 유지됩니다.

create-react-app을 사용하여 새로운 ReactJS 앱으로 시작하고 그 후 react-query를 설치합니다.

npm i react-query --save

저는 axios를 사용하고 싶지만 단순함을 위해 가져오기를 사용하겠습니다. 방금 App.js를 정리하고 fetchUsers 함수를 작성했습니다.

const fetchUsers = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const data = await response.json();
    return data
}

이제 이것을 useEffect 등으로 사용하는 대신,
react-query에서 useQuery 가져오기

import { useQuery } from 'react-query'

이제 이를 사용하여 다음과 같이 데이터를 가져올 수 있습니다.

const response = useQuery('users',fetchUsers)

여기에서 useQuery에는 두 개의 인수가 필요합니다. 첫 번째는 식별할 수 있도록 전체 코드에서 고유해야 하는 키입니다. 여기에 배열을 전달할 수 있습니다.

두 번째 인수는 데이터를 가져오는 함수입니다. 여기에 fetchUsers를 넣었습니다.

객체를 세 번째 인수로 전달할 수 있으며 retry, retryDelay, enabled, cacheTime, onError 등과 같은 일부 기본 구성을 변경할 수 있는 선택 사항입니다.

이제 응답에는 다음과 같은 속성이 있습니다.

data,
error,
failureCount,
isError,
isFetchedAfterMount,
isFetching,
isIdle,
isLoading,
isPreviousData,
isStale,
isSuccess,
refetch,
remove,
status,

data - 가져온 실제 데이터입니다.

상태 - 문자열 또는 열거형이 될 것입니다. "로드 중", "오류", "성공"또는 "유휴"일 것입니다.

isLoading - 부울이며 쿼리 함수가 해결되거나 거부될 때까지 true입니다. 그 후에 그것은 거짓이 될 것입니다. 이것은 처음 로드하고 아직 데이터가 없을 때 더 유용합니다.

isFetching - 부울이며 현재 데이터를 다시 가져올 때까지 true입니다.

내 예에서는 충분한 데이터 및 상태 속성을 사용하고 있습니다.

이제 데이터를 표시하는 데 사용할 수 있습니다.

import React from "react";
import './app.css';
import { useQuery } from "react-query";
const fetchUsers = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await res.json();
return data;
};
const App = () => {
  const { data, status } = useQuery("users", fetchUsers);
  return (
    <div className="App">
      {status === "error" && <p>Error fetching data</p>}
      {status === "loading" && <p>Fetching data...</p>}
      {status === "success" && (
        <div>
          {data.map((user) => (
            <p key={user.id}>{user.name}</p>
          ))}
        </div>
      )}
    </div>
  );
};
export default App;

여기서 내가 한 것은 상태를 확인하고 데이터를 표시하는 것입니다. React Query useQuery 후크를 사용하는 방법에 대한 간단한 설명입니다. 다른 많은 후크도 있습니다.

우리는 항상 로드 상태와 오류 상태 등을 모두 사용하기 때문에 이 useQuery를 사용하는 또 다른 버전입니다.

import React, {useState} from 'react'
import {useQuery} from 'react-query';


const fetchUsers = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await res.json();
return data;
};

function App() {
    const{data, isLoading, isError, error}= useQuery('users',fetchUsers)
    if(isLoading) {
        return <div>Loading...</div>
    }

    if(isError) {
        return <div>Something happened {error.message}</div>
    }
  return (
    <div className="App">
        Users
        <ul>
            {data?.map((user) => <li>{user.name}</li>)}
        </ul>
    </div>
  )
}

export default Users

이제 로딩 상태, 오류 상태 등 모든 것을 관리할 필요가 없습니다.

이것이 반응 쿼리에 대한 첫 번째 단계에서 유용하기를 바랍니다. 자세한 내용은 공식 문서를 참조하십시오React Query Official docs.