react-query

설치

npm install react-query

 

index.js

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

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

 

react-query 사용

import { useQuery } from "react-query"

function App(){
  const result = useQuery(name, ()=>
    axios.get('URL')
    .then((a)=>{ return a.data })
  )
}

 

ajax 상태 알아보기

import { useQuery } from "react-query"

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

  return (
    <div>
      { result.isLoading && '로딩중' }
      { result.error && '에러' }
      { result.data && result.data.name }
    </div>
  )
}

ajax 성공/실패/로딩중일 때 어떤 html <A/>를 화면에 보이게 하려면 state를 만들어 코드를 작성해야 했지만  react query를 쓰면 result에 ajax의 현재 상태가 자동으로 저장되어 그럴 필요가 없어진다.

 

ajax요청이 로딩중이면 result.isLoading 이 true가 된다.

ajax요청이 실패하면 result.error 가 true가 된다.

ajax요청이 성공하면 result.data 안에 데이터가 들어온다.

 

ajax 재요청

일정시간이 지난 후 자동으로 ajax 요청을 다시 해준다. 재요청을 끄거나 재요청 간격을 조절할 수도 있다.

 

ajax 재시도

인터넷 끊김으로 ajax 요청이 실패했을 경우 자동으로 요청을 재시도한다.

 

state 공유 필요 X

ajax로 가져온 결과는 props 전송이 필요 없다. ajax 요청이 2개나 있으면 1개만 전달하고 캐싱기능이 있어 이미 같은 ajax 요청을 한 적이 있으면 우선 가져와 사용한다.

 

사용 이유

ajax를 요청할 때

- 몇초마다 자동으로 데이터 다시 가져오게 하려면?

- 요청실패시 몇초 간격으로 재시도?

- 다음 페이지 미리가져오기?

- ajax 성공/실패시 각각 다른 html을 보여주려면?

 

react-query는 SNS, 코인거래소 같이 실시간 데이터를 보여줘야 하는 곳에 유용하다.

실시간으로 서버에서 데이터를 자주 보내려면 웹소켓이나 Server-sent event 같은 방식도 있다.