[React] 리액트 쿼리(React Query) 기초

soyeon·2022년 3월 3일

React TIL react-query

TIL

목록 보기

12/32

리액트 쿼리란?

fetch, cashing, 서버 상태를 동기화 및 업데이트를 쉽게 해주는 라이브러리

🐤설치하기

npm i react-query

🐤준비하기

모든 컴포넌트를 <QueryClientProvider>로 감싸준다^^
index.tsx

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from "react-query";

// Create a client
const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    {/* // Provide the client to your App */}
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

💕사용하기

리액트 쿼리 없이 쓴 코드

  const [coins, setCoins] = useState<CoinInterface[]>([]); //타입: CoinInterface의 타입들이 들어간 배열
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // ()(); 즉시 실행 함수
    (async () => {
      const response = await fetch("https://api.coinpaprika.com/v1/coins");
      const json = await response.json();
      setCoins(json.slice(0, 100));
      setLoading(false);
    })();
  }, []);

fetcher 함수 만들기

api를 호출하는 함수를 따로 파일을 만들어서 작성
api.ts

export function fetchCoins() {
  return fetch("https://api.coinpaprika.com/v1/coins").then((response) =>
    response.json()
  );
}

useQuery 사용해서 로딩과 데이터 한 번에 해결

import { useQuery } from "react-query";
...
  // useQuery는 isloading이라는 state를 반환 (불리언타입)
  // fetcher 함수로 가져온 데이터는 data에 저장
  const {isLoading, data} = useQuery<CoinInterface[]>("allCoins",fetchCoins)

💞useQuery(캐시 이름, fetch 함수,[refetch 설정])

개발자 도구로 데이터 확인하기

useQuery는 데이터를 캐시로 저장하는데 이를 개발자 도구를 통해 시각적으로 확인할 수 있다.

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

App.tsx

function App() {
  return (
    <>
      <GlobalStyle />
      <Router />
      //개발자 도구 컴포넌트 추가
      <ReactQueryDevtools initialIsOpen={true} />
    </>
  );
}

화면 하단에 개발자 도구 아이콘이 표시된다.
개발자 도구를 열어보면 useQuery를 이용해 받아온 데이터"allCoins"가 캐시로 저장되어 있다는 것을 알 수 있음

💞useQuery로 refetch 하기

비동기적으로 데이터를 업데이트합니다.
useQuery의 3번째 인자에 refetchInterval:밀리초를 설정합니다.

  const { isLoading, data } = useQuery<PriceData>(
    ["tickers", coinId], fetchFunction ,
    {
      refetchInterval: 5000,
      //5초마다 refetch
    }
  );