ReactQuery 설치 및 사용법

설치방법

• npm i react-query
• yarn add react-query
  공식문서 링크

적용된 화면

• index.tsx (Provider setting)
  

• 변수 설정 및 선언해둔 함수를 호출(fetchCoin : 함수명 ) : userQuery hook

const { isLoading, data } = useQuery<ICoin[]>('allCoins', fetchCoins);

• 파리미터가 있는경우는 다음과같이 넣어준다 (isLoading, data 이름 변경)![]

    const { isLoading: tickersLoading, data: tickersData } =
        useQuery<PriceData>(['tickers', coinId], () =>
            fetchCoinTickers(coinId)
        );

ReactQueryDevtools (App.tsx)

        <>
            <GlobalStyle />
            <Router />
            <ReactQueryDevtools initialIsOpen={false} />
        </>

• 공식문서 소스 (App.tsx에 Provider하는 경우도 있습니다...)

    <QueryClientProvider client={queryClient}>
       {/* The rest of your application */}
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>

장점

• 가장 큰 장점 : 결과값 response를 Caching을합니다!!! api 재호출 방지 등을 자동으로 해준다
• isLoading 및 useState생략이 가능함에 따른 소스줄이 확 감소 가능