실시간 데이터가 중요하면 react-query

사용이유

몇초마다 자동으로 데이터 가져오게 하기

실패시 재시도 알아서가져오기

ajax 재요청 쉽게 가능

다음 페이지 미리 가져오기

ajax 성공/실패시 쉽게파악가능

 

결론 : 실시간 데이터가 필요한 사이트에서 사용하자.

 

 

설치 및 셋팅 방법

 

터미널에서 아래 코드를 친다.

npm install @tanstack/react-query

 

index.js파일 열어서 아래 코드를 입력해준다.

import { QueryClient, QueryClientProvider } from '@tanstack/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요청하는 법

상단에서 useQuery를 import해온다음

useQuery()로 ajax요청을 감싸주면된다.

import { useQuery } from '@tanstack/react-query'

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

 

장점

 

ajax 요청 성공/실패/로딩중 상태 파악가능

 

result라는 변수에 ajax 현재 상태가 알아서 저장된다.

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

- ajax요청이 실패시엔 result.error 가 true가 된다.

- ajax요청이 성공시엔 result.data 안에 데이터가 들어온다.

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

 

틈만나면 알아서 ajax 재요청해준다.

 

같은 페이지에서 일정시간이 경과되거나

다른 페이지에 갔다가 돌아올 때

ajax요청을 다시해준다.

 

재요청 끄는 법, 재요청간격 조절하는 법도 있다.

 

실패시 재시도 알아서 해줌 

 

알아서 해줌

 

 ajax로 가져온 결과는 state 공유 필요없음