React-Query

세팅

설치

npm install react-query@3
===========================================================
(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>
);

 

사용 시

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

 

작명법

useQuery(['작명'],

ReactQuery

• ajax 요청하다보면 이런 기능들이 가끔 필요
  • 몇초마다 자동으로 데이터 다시 가져오게 하기
  • 요청 실패 시 몇 초 간격으로 재시도
  • 다음 페이지 미리 가져오기
  • ajax 성공 / 실패 시 각각 다른 html을 보여주기
• 직접 개발해도 상관 없지만 react-qurey 라는 라이브러리로 쉽게 가능
• SNS, 코인거래소 같은 실시간 데이터를 보여줘야하는 사이트들이 사용하면 유용

react-query로 ajax 요청하는 법

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

• 그냥 ajax 요청해도 되지만 react-query를 써서 ajax 요청을 날리면 더 편리한 기능을 제공
• 상단에 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이 true
  • ajax 요청이 실패 시엔 result.error가 true
  • ajax 요청이 성공시엔 result.data 안에 데이터가 들어옴
• 따라서 ajax 로딩 중일 땐 <A/>, 성공 시엔 <B/> 보여주기를 손 쉽게 가능

장점2 : 자동 ajax 재요청

• 페이지 체류하고나서 일정시간이 경과하거나 다른 창으로 갔다가 다시 페이지로 돌아오거나 다시 메인 페이지로 돌아가거나 이런 여러 경우에 알아서 ajax 요청을 다시 해준다.
• 재요청 끄는 법, 재요청 간격 조절하는 법도 있다.

장점3 : 실패 시 재시도 자동으로 작동

• 잠깐 인터넷이 끊겼거나 서버가 죽었거나 할 때 ajax 요청이 실패한다.
• 실패했을 때는 자동으로 4~5번 재시도를 자동으로 해준다.

장점4 : ajax로 가져온 결과는 state 공유 필요X

• 기존에는 App 컴포넌트에서 유저이름 가져오는 ajax 요청을 날리고 있다. 이 때 그 유저 이름 결과가 Detail 컴포넌트에도 필요하면 유저이름을 props로 전송했다.
• 하지만 react-query는 Detail 컴포넌트에다가 유저이름 ajax 요청하는 코드 똑같이 또 적으면 된다.
  => react-query에서는 ajax 요청이 2개 있으면 1개 날려주고 캐싱 기능이 있기 때문에 이미 같은 ajax 요청을 한 적이 있으면 그걸 우선 가져와서 사용