[React] 20. react-query

react-query

ajax 요청중 자동으로 데이터를 다시 가져오거나, 요청 실패시 몇초 간격으로 재시도, 다음 페이지 미리 가져오기 등 실시간 데이터를 보여주는 사이트에서 유용하다.

 

react-query 설치

npm install react-query@3

 

react-query 셋팅

import { QueryClient, QueryClientProvider } from "react-query"  //1번
const queryClient = new QueryClient()   //2번

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <QueryClientProvider client={queryClient}>  //3번
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </QueryClientProvider>
);

 

react-query 로 ajax요청

function App(){
  let result = useQuery('userName', ()=>
    axios.get('사이트 url')
    .then((a)=>{ return a.data })
  )
}

 

react-query 장점

1. ajax 요청 성공/실패/로딩중 상태를 쉽게 파악할 수 있다.

function App(){
  let result = useQuery('userName', ()=>
    axios.get('사이트 url')
    .then((a)=>{ return a.data })
  )
   return (
    <div>
      { result.isLoading && '로딩중' }
      { result.error && '에러' }
      { result.data && result.data.name }
    </div>
  )
}
}

 

2. ajax 자동 재요청

일정시간이 경과하거나 다시 메인페이지로 돌아오는 등 여러 경우에 알아서 ajax 요청을 다시 해준다.

 

3. 요청 실패시 재시도

요청에 실패하면 자동으로 재시도

 

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

다른 컴포넌트에서 같은 결과가 필요하다면, 그 컴포넌트에서 ajax를 요청하면 된다. react-query에서 자동으로 ajax 요청이 2개가 있다면 1개만 날려준다.