[React] React-Query

React-query는 fetcher 함수를 만들수 있게 해준다.

export function fetchCoins(){
 return fetch(`${BASE_URL}/coins`).then(response=>response.json())
}

기본적으로 fetcher 함수와 연결시켜서 isLoading과 같은 함수가 불렸는지 아닌지를 알려준다.

그리고 함수가 끝났을 때는 결과 값을 data에 넣어준다.

const { isLoading, data }=useQuery<CoinInterface[]>("allCoins", fetchCoins)

그리고 여러개의 query를 사용하게 되어 key값을 겹치지 않게 하고 싶고, argument가 필요한 경우에는 아래와 같이 작성한다.

const {isLoading: infoLoading, data:infoData}=useQuery<InfoData>(["info", coinId], ()=>fetchCoinInfo(coinId))
const {isLoading: tickersLoading, data:tickersData}=useQuery<PriceData>(["tickers",coinId], ()=>fetchCoinTickers(coinId))

 

또한 캐싱을 지원하는데 query의 고유 key값을 넘겨주면 캐시를 생성하여 불필요한 로딩을 줄일 수 있다.

이를 확인하는 방법은 react query dev tool 을 설치하면 볼 수 있다.

import {ReactQueryDevtools} from 'react-query/devtools //Import

<ReactQueryDevtools initialIsOpen={true}/>//컴포넌트 추가