React - 실시간 데이터 react-query

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

1. 몇초마다 자동으로 데이터 다시 가져오게 하기
2. 요청 실패 시 몇초 간격으로 재시도하기
3. 다음 페이지 미리 가져오기
4. ajax 성공/실패 시 각각 다른 html 보여주기

• 직접 개발해도 되고 react-query 라는 라이브러리를 설치해도 된다.
• SNS, 코인거래소 같은 실시간 데이터를 보여줘야하는 사이트에 쓰면 유용하다.

🖤 react-query 설치 & 셋팅

• 터미널에 npm install @tanstack/react-query 입력하기

(index.js)

import { QueryClient, QueryClientProvider, useQuery } 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 요청하는 법

• 그냥 ajax 요청해도 되지만 react-query를 써서 ajax 요청을 날리면 더 편리한 기능을 제공한다.

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

• useQuery 라는걸 상단에서 import 한 후 useQuery() 로 ajax 요청을 감싸면 된다.

🤍 장점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 이 ture 가 된다.
• ajax요청이 실패시엔 result.error 가 ture 가 된다.
• ajax요청이 성공시엔 땐 result.data 안에 데이터가 들어온다.

🤍 장점2. 알아서 ajax를 재요청해준다.

• 페이지를 체류하고나서 일정 시간이 경과하거나
  우리가 다른 창으로 갔다가 다시 페이지로 돌아가거나
  이런 경우에 알아서 ajax 요청을 다시 해준다.

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

• 잠깐 인터넷이 끊겼거나 서버가 죽었거나 그러면 ajax 요청이 실패한다.
• 실패했을 때는 4번 or 5번 재시도를 알아서 해준다. (아주 편리함!!)

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

• App 컴포넌트에서 유저 이름을 가져오는 ajax 요청을 날리고 있는데
  이 유저 이름 결과가 Detail 컴포넌트에도 필요하다면??
  -> 유저이름을 props 전송하면 된다.

• 실은 props 전송 필요 없이 Detail 컴포넌트에 유저이름 ajax 요청하는 코드를 똑같이 또 적으면 된다.