react-query

 

- 몇 초마다 자동으로 데이터 다시 가져오기 

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

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

- ajax 성공 / 실패 시 각각 다른 화면 보여주기 

 

 

 

ajax 요청하다가 보면 위와같은 기능들 필요하다 

 

react-query 사용하면 더욱 편리하다

 

실시간 데이터 보여주어야 하는 사이트들에서 유용

 

 

 

 

 

 

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

 

 

 

 

 

react-query 로 ajax 요청

 

react-query 사용하여 ajax 요청하면 편리한 기능들 제공한다.

 

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

 

useQuery 상단에서 import 한 후, useQuery() 함수 안에 ajax 요청하면된다. 

 

 

 

 

 

장점 1. ajax 요청 성공 / 실패 / 로딩중 상태를 쉽게 파악 가능

 

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

  return (
    <div>
      { result.isLoading && 'loading' }
      { result.error && 'error' }
      { result.data && result.data.name }
    </div>
  )
}

result 라는 변수에 ajax 의 현재 상태가 자동으로 저장된다. 

 

- ajax 요청 로딩중일 땐 result.isLoading 이 true

- ajax 요청 실패했을 땐 result.error 이 true

- ajax 요청 성공했을 땐 result.data 안에 데이터가 담긴다. 

 

 

 

 

 

 

장점 2. 자동으로 ajax 재요청해준다. 

 

페이지에 접속한 후 일정 시간이 지나거나, 다른 창으로 갔다가 현재 페이지로 돌아왔을 때, 다시 메인페이지로 돌아갔을 때, 알아서 ajax 요청 다시 해준다. 

 

요청 끄는법, 재요청 간격 조절하는 방법도 존재

 

 

 

 

 

장점 3. 실패 시 재시도 알아서 해준다. 

 

인터넷이 끊기거나 서버가 죽었을 때 ajax 요청이 실패한다. 

실패했을 땐 4, 5번 정도 재시도해준다. 

 

 

 

 

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

 

자식 컴포넌트에서 해당 데이터가 필요하면 props 이용하여 데이터를 전송해주면된다. 

 

하지만 react-query 사용하면 props 전송이 필요가 없다.

 

자식 컴포넌트에 ajax 요청하는 코드 똑같이 적어주면 된다.

 

그러면 react-query 에서 동일한 ajax 요청은 한번 더 해주고 캐싱 기능이 있어, 이미 같은 ajax 요청한 적이 있으면 가져와서 사용한다.

 

 

 

 

 

react-query 가 주장하는 장점은

 

server-state (DB 데이터)를 프론트엔드에서 실시간 동기화하는걸 도와준다고 한다.

 

근데 ajax 요청을 몇초마다 계속 날려서 가져오는 방식이라 비효율적일 수도 있다.

 

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

 

따라서 react-query 는 ajax 관련 기능개발을 편하게 할 수 있는 것에 더 의의가 있다.