react-query : 실시간 데이터가 중요할 때?

ajax 요청하다보면 이런 기능들이 가끔 필요해진다.

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

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

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

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

 

1. react-query 설치 & 셋팅

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

 

2. react-query로 ajax 요청하는 법

useQuery 라는걸 상단에서 import 해온 뒤에 useQuery()로 ajax 요청을 감싸면 된다.

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

 

3. react-query의 장점

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

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

  return (
    <div>
      { result.isLoading && '로딩중' }
      { result.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) ajax로 가져온 결과는 state 공유 필요없다. 

react-query은 server-state (DB 데이터)를 프론트엔드에서 실시간 동기화해주는걸 도와준다.

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

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

그래서 react-query는 ajax 관련 기능개발 편하게 할 수 있는데에 의의가 더 있습니다.