리액트 react-query 정리 ( 추후 업데이트)

React-query 는 리액트에서 비동기 데이터를 관리하기 위한 라이브러리이다.

서버와 통신을 하면서 AJAX 요청을 할때, 이 요청을 몇초마다 자동으로 해야한다거나,

요청 실패시 몇초 간격으로 다시 시도한다거나 등등 실시간으로 데이터를 보여줘야할때 (ex SNS 메세지, 코인 거래소 등등) react-query를 사용하면 된다.

🔍 React-query 설치법

1. 터미널에서 react-query 설치

npm install @tanstack/react-query 

2. index.js 에서 import한 후, queryClient 변수 선언 하고 QueryClientProvider 가 App 감싸기

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

const queryClient = new QueryClient();

...

  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
    <Provider store={Store}>
    <BrowserRouter>
    <App />
    </BrowserRouter>
    </Provider>
    </QueryClientProvider>
  </React.StrictMode>

🔍 React-query 를 이용해서 ajax 요청해보기

useQuery 사용하기

import { useQuery } from "@tanstack/react-query";


...

function App() {
  ...
  
  
    let result = useQuery('작명' ,() => {
    return axios.get('https://codingapple1.github.io/userdata.json').then((a) =>{
     return a.data
    }) 
  })
  

이런식으로 useQuery 를 사용하게 되면

1. ajax 요청의 성공, 실패, 로딩중 여부를 알수 있다.

{result.isLoading && '로딩중'}
{result.error && '에러'}
{result.data && result.data.name}

셋중에 해당하는 것을 보여준다

2. 알아서 ajax 를 재요청을 해준다. (실시간 refetch)

useQuery 안에 감싸진 ajax 요청 코드를 주기적으로 실행시켜준다.

❗️staleTime 을 통해 refetch 간격을 조절해줄 수 있다❗️

3. ajax 요청 실패시 재시도를 해준다.

4. ajax 로 가져온 결과는 state 공유가 필요 없다.

React-query 는 캐싱 기능이 있기 때문에 전에 ajax 요청을 해놓은게 있다면, 다른 컴포넌트에서 도 그 요청에 대한 결과를 가져와준다.

❗️ 아직 확 와닿지 않기 때문에 나중에 프로젝트 진행하면서 업데이트를 더 해보자 ❗️