[React] React-Query 사용하기 (useQuery)

서론이 좀 깁니다. 사용법을 바로 보고싶으신분은 스크롤해서 밑으로 내려주시길 바랍니다.

 

앵귤러를 사용했었을때는 비동기 요청의 상태를 변수로 선언해서 관리하였었다.

 

예로들면 가져오는데 시간이 걸리는 getBigData라는 함수가 있다고 가정하겠다.

isRequstingData라는 flag변수를 하나 두고 해당 변수가 true이면 아직 api요청중이므로 해당 api를 다시 콜해도

실행되지않고 return된다.

이 isRequsting의 true false값으로 현재 데이터를 요청중인지 아니면, 요청이 다 됐는지를 판단해서

아직 요청중이라면 로딩화면을, 요청이 완료되면 데이터를 보여주었었다.

isRequestingData = false;

async getBigData(){
    if(isRequestingData) return
    isRequstingData = true;
    try{
    	데이터 가져오는로직
    }
    catch(e){
    	console.log(e)
    }
    isRequstingData = false;
}

<ng-container *ngIf="isRequstingData">
    <div>
        <h1>...is Loading</h1>
    </div>
</ng-container>

<ng-container *ngIf="!isRequstingData && data">
    <div>
        가져온 데이터를 보여준다.
    </div>
</ng-container>

코드로 간략하게 포현하면 위와 같이 표현하였었다. loading처리만 저렇게했고 error처리는 또 따로 해주어야한다.

 

하지만 React-Query에서 일일이 다 구현하지 않고 인터페이스를 제공함으로서 편리하게 사용할수있다고한다.

바로 사용법을 알아보자.

 

사용하기에 앞서 다운로드를 먼저 받아보자. 원래 npm i react-query였던것같은데 이름이 바뀌었다.

$ npm i @tanstack/react-query
# or
$ yarn add @tanstack/react-query

 

useQuery

GET요청을 할때 useQuery를사용한다. POST요청이나 PUT처럼 데이터를 수정하는 요청은 useMutation을 사용한다.

본인은 GET요청을 할것이므로 이번 포스팅에서는 useQuery만을 사용하겠다.

 

useQuery의 생김새는 다음과 같다.

const {
  data,
  dataUpdatedAt,
  error,
  errorUpdatedAt,
  failureCount,
  isError,
  isFetched,
  isFetchedAfterMount,
  isFetching,
  isPaused,
  isLoading,
  isLoadingError,
  isPlaceholderData,
  isPreviousData,
  isRefetchError,
  isRefetching,
  isStale,
  isSuccess,
  refetch,
  remove,
  status,
  fetchStatus,
} = useQuery(queryKey, queryFn, {options})

뭔가 엄청많아보이지만 내가 사용하고자하는것은 data와 isLoading이다.

data는 Api요청이 성공했을때 반환되는 값이고 isLoading은 Api요청중일때 isLoading이 true가된다.

종류가 많아서 사용하고싶은걸 검색해서 사용하면된다.

 

queryKey는 유니크한 값이여야하고 string형태나 array형태로 사용한다. v4부터는 string형태를 못쓰게한다고하니

array형태를 사용하도록하자. 키값이 중복되지않아야 캐싱을 활용할수있다.

 

qeuryFn에는 Promise를 반환하는 fetch함수나 axios함수가 들어간다. 대부분 Api함수를 넣어준다.

 

options에는 실패했을때 몇번 더 요청할지 정하는 retry나 캐시를 저장할 시간 cacheTime등등 옵션이 너무 많아서

원하는걸 검색해서 사용해보도록하자.

 

본인은 datas라는 키값을 가지고 getData의 결과값을 반환하는 uesQuery를 작성해보겠다.

uesQuery 코드

uesQuery를 사용하기 위해선 코드의 최상위 컴포넌트를 <QueryClientProvider>로 감싸주어야한다.

queryClientProvider에는 queryClient를 props로 넣어주고 사용하면된다. queryClient는 default옵션들을 바꿔줄수있다.

 

아래 공식문서에서 옵션들을 확인할수있다. 본인은 옵션은 사용하지않고 바로 진행하겠다.

https://tanstack.com/query/v4/docs/reference/QueryClient

 

 

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

interface IUser {
  id: number;
  name: string;
  age: number;
}

const queryClient = new QueryClient()

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

function Example(){
     const getData = async ()=>{
        const { data } = await axios.get('https://localhost:8000');
        return data;
    }
    
    const {isLoading,data} = useQuery(['datas'],getData);
    
    if(isLoading){
        return(
            <h1>...isLoading</h1>
        )
    }else{
        return(
            {data.map(v:IUser=>{
            	<div key={v.id}>
                    <span>{v.name}</span>
                    <span>{v.age}</span>
                </div>
            })}
        )
    }
}

 

getDate함수의 요청상태에 따라서 반환값을 다르게하는 예제이다.

 

※ isLoading에 대해 검색해보던중 카카오테크에서 알게된 사실을 적어본다. isLoading은 데이터의 유무에 따라서 false true가 결정된다. 이것외에도 다른 팁들이 많아 굉장히 유용한 글이니 꼭한번 읽어보길 권장한다.

isLoading은 캐싱 된 데이터가 없을 때만 true를 리턴합니다.

isFetching은 캐싱 된 데이터 유무에 상관없이 데이터 Fetching 때마다 true를 리턴합니다. 반면, isLoading은 캐싱 된 데이터가 없을 때만 true를 리턴합니다. (initialData 옵션을 설정하면 항상 false를 리턴합니다.) 둘의 차이를 알면 더 적합한 Loading Indicator를 사용할 수 있습니다.

끝~~

참고

https://tech.kakao.com/2022/06/13/react-query/

My구독의 React Query 전환기

https://tanstack.com/query/v4/docs/reference/useQuery