Written by Parkdev
on January 25, 2024

[React] 실시간 쿼리를 위한 react-query

React Query를 써보자

React-Query를 왜 쓸까?

데이터를 요청할때마다 다양한 상황에 맞춰서 코드를 짜야하는 경우가 많다.
- 예를들면 ajax 성공/실패시 무엇을 보여줄 것인가
- 몇초마다 ajax를 요청해야하는 경우
- 요청 실패시 요청 재시도는 어떻게?
- prefech (다음 페이지 내용을 미리 가져올 때는 어떻게?)
이때 React-Query를 쓰면 보다 적은코드로 작성이 가능하다.
실시간 SNS만들때, 코인거래소 등 실시간 데이터를 보여주는 사이트를 만들때 유용하다.

그럼 본격적으로 사용해보자

우선 설치가 필요하다

npm install react-query

그다음 index.js에 세팅이 필요하다.

//index.js
import { QueryClient, QueryClientProvider } from 'react-query';

//QueryClient 상수를 만들고
const queryClient = new QueryClient()

//App.js를 감싸면된다.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider >
    </QueryClientProvider>
  </React.StrictMode>
);

그다음 본문에서 사용하면 된다.

// 일반적으로 데이터를 가져올때,
axios.get('https://codingapple1.github.io/userdata.json').then((a))->{
   a.data
}) 
// 와 같이 가져오지만 react-query를 이용한다면 use Query를 사용해야한다.
let result = useQuery('작명', () =>{
	return axios.get('https://codingapple1.github.io/userdata.json').then((a) => {
  		return a.data
	})
})

react-query를 사용함으로써 얻을수 있는 장점은 다음과같다.
1. 성공/실패/로딩 상태를 쉽게 파악할 수 있다.
  - result.data - 요청 성공시 데이터가들어와있다.
  - result.isLoading - 요청중일때 true를 반환한다.
  - result.error - 요청실패시 true를 반환한다.
2. 항상 실시간으로 데이터를 불러와준다 (refetch)
  - 실시간으로 신선한 데이터를 보여줘야하는 경우에 매우 유용하다.
3. 요청 간격 설정도 가능하다.
```
let result = useQuery('작명', () =>{
	return axios.get('https://codingapple1.github.io/userdata.json').then((a) => {
  		return a.data
	}),
	{ staleTime : 2000} // 너무 빈번하게 요청하는것같으면 이런식으로 간격 설정이 가능하다.
})
```
4. 요청 실패시 자동으로 retry를 해준다.
5. state 공유 하지 않아도 된다.
  - 해당 값이 필요한 component에 동일하게 useQuery를 통해 값을 가져와도 Query를 또 다시 날리지 않는다.
  - 때문에 다른 component에서도 사용하려면 똑같은 쿼리 코드를 보내면된다.
6. ajax 캐싱 기능 - ajax 성공 결과를 5분 동안 저장한다.
  - 5분전에 이미 query한 결과가 있으면 5분전 데이터를 보여주고, 5분이 지난 이후 query요청이 들어오면 그때 새롭게 request를 보낸다.

참고

redux-toolkit을 사용한다면 이 안에 RTK Query가 포함되어있어 react-query와 동일한 문법으로 사용 가능 하다.

예제. 네비바 프로필 글씨를 불러와보자

불러오는 중에는 ‘로딩중’ 이라는 텍스트를 띄우고
로딩 후에는 이름을 띄워주면된다.

<Nav className='ms-auto'>
{result.isLoading ?'로딩중' : result.data.name}
</Nav>

// 다양한 케이스를 처리하려면 다음과 작성하면 좀더 깔끔하게 작성할 수 있다.
{ result.isLoading && '로딩중'}
{ result.error && '에러남'} // 이러면 로딩뿐 만아니라 에러 처리도 가능하다
{ reulst.data && result.data.name }

← → Top