REACT- react-query 사용해보기 (실시간데이터가 필요할 때)

서버랑 통신하는 코드를 ajax로 짜다보면 여러 기능들이 추가적으로 필요해지게 되는데, 

 

앞서 말했듯이 ajax성공 시와 실패시의 경우나

실패 시 몇초 후에 요청을 재시도 할 수도 있는 경우,

다음페이지 내용을 미리 가져오는 것이나, 

몇초마다 자동으로 ajax가 생행되는 것들이 있다.

 

위의 기능들을 코드를 끄적끄적하여 만들 순 있지만 더 간편하게 할 수 없을까?

라고 생각한다면 그 방법은 있다.

바로 리액트 쿼리되시겠다.

 

 

 

꽃같이 이쁜 로고

 

 

 

 

 

리액트쿼리 라이브러리를 사용하면 위의 기능들을 더 쉽게 적은 코드로 구현이 가능하다.

 

이 React Query는 자주자주 사용되어지는 것이아니라,

SNS나 돈거래소, (코인, 주식)이런 실시간데이터들을 계속 가져와야하는 경우 사용하는 게 좋다.

 

 

그럼 이 React Query를 사용해보자.

 

| react-query 설치

npm install @tanstack/react-query

 

| 설치 후 index.js에 가서 셋팅 ( import 꼭 )

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <QueryClientProvider client={queryClient} >
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>
    </QueryClientProvider>
);

serviceWorkerRegistration.register();
reportWebVitals();

 

서버에서 user이름 가져와서 보여주기

| ajax  get 요청

  axios.get('경로').then((x) =>{
    x.data
  })

근데 이렇게 말고 react query를 가지고 ajax 요청을 해보자.

 

 

react-query 라이브러리에서 제공하는 useQuery() 함수를 import하여 사용한다.

import { useQuery } from "react-query"

function App() {

  useQuery()

  return (
    <div className="App">

      <header className='header-container'>
        <ul className='nav-ul flex-box'>
         
         
         -- 중간 코드 생략 --

useQuery('작명', ()=>{
	return axios.get('경로').then((x) =>{
    		return x.data
    })
})

 

 

const result = useQuery('작명', ()=>{
	return axios.get('경로').then((x) =>{
    		return x.data
    })
})


result.data

result.isLoading

result.error

 

변수에 저장해서 사용하기

 

 

장점은

성공했나, 실패했나 변수하나로 쉽게 파악가능하다.

 

 

로딩중일 때 '로딩중입니다'라고 보여주고 싶을 때는?

{ result.isLoading ? '로딩중' : result.data.name }

 

 

&& 사용해도된다.

{ result.isLoading && '로딩중' }
{ result.error && '에러나고있다' }
{ result.data && 'result.data.name' }

 

 

이거를 react-query를 사용하지 않았다면 그냥 state부터 만들고 시작했어야했다.

근데 이 라이브러리는 그럴 필요가 없다.

 

그리고 refatch를 자동으로 해주기 때문에 실시간으로 싱싱한 데이터들을 볼 수 있고

실패 시 자동으로 알아서 retry를 해준다.

 

 

마지막으로 또 하나의 장점이 있는데, 

자식컴포넌트한테도 보여주고 싶을 때

state공유를 안해도된다는 것!

props로 전송안해도되고 그냥 부모컴포넌트안에 넣었던 ajax코드 그대로 넣어도 가능하다! 

 

근데 두번이나 코드를 쓰면 비효율적..

굳이 똑같은 요청을 두번이나 하지않는 react query

 

근데 또 있다 또있어. 장점이!

캐싱기능이 있다는 것, 캐싱이란 ajax성공결과를 5분동안 기억을 해준다는 것, 

 

 

 

redux-toolkit 설치했다면 RTK Query도 자동 설치되어지기 때문에 

react-query 유사한 기능개발 가능