react-query

ajax 요청시

• 몇초마다 자동으로 데이터 다시 가져오기
• 요청실패시 재시도
• 다음 페이지 미리 가져오기
• ajax 성공/실패시 다른 html 보여주기

이러한 기능들이 필요할때가 있다.
직접 구현해도 되지만
react-query를 이용해보도록 하자.
(실시간 데이터를 주고받는 사이트의 경우 유용하다고함)

설치

npm install react-query

index.js

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>
); 

App.js

function App(){
  let result = useQuery('이름', ()=>
    axios.get('서버URL')
    .then((a)=>{ return a.data })
  )
}

현재 상태 알아보기

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

result라는 변수에 ajax 현재 상태가 알아서 저장됨.
로딩중일때는 .isLoading 이 true,
에러날때는 .error이 true,
성공시엔 .data에 데이터가 들어온다.

react-query의 또다른 장점은

• 틈만나면 알아서 ajax 재요청해줌.
• 실패시 재시도 알아서해줌.
• state props공유 필요없음(요청두번날리면 한번만해줌)
• DB데이터 실시간 동기화 도와줌

---

코딩애플 강의를 보고 작성됨