주식이나 디지털 자산 거래소를 보면, 실시간으로 현재 가격이 계속 실시간으로 갱신되어 최신 가격이 보이는 것을 확인할 수 있다.
리액트에서 이와 같은 기능을 어떻게 구현할 수 있을지 생각해 보았다.
실시간으로 서버와 통신을 하기 위해서 소켓을 사용할 수 있다.
소켓을 사용하는 방법 이외에 서버의 실시간 데이터를 받아 데이터를 갱신할 수 있는 방법으로 React Query를 사용해보기로 하였다.
npm i react-query로 리액트 쿼리를 설치한다.
React Query 초기 설정
- 리액트 쿼리를 사용하기 위해서 일단 QueryClientProvider가 사용될 컴포넌트 상위에 위치해야 한다.
- 그리고 QueryClientProvider의 client에 QueryClient가 연결되야 한다.
import { QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient();
function App() {
return (
<div className="App">
<QueryClientProvider client={queryClient}>
<p>안녕!</p>
</QueryClientProvider>
</div>
);
}
export default App;
React Query 사용
import { useQuery } from "react-query";
const Data = () => {
const 필요한데이터요청 = "id";
const {isLoading, error, data, isFetching, refetch} = useQuery(
[필요한데이터요청], () => {
return fetch(`https://API 주소/${필요한데이터요청}`)
.then((res) => res.json())
.then((res) => res.data) // return값이 data에 담기게 된다.
}
, {
enabled: !!필요한데이터요청, // 해당 변수가 있을 때만 요청을 보낸다
refetchInterval: 1000 // 1초마다 갱신
}
);
if(isLoading){
return <h1>로딩중!</h1>;
}
if(error){
return <h1>에러 발생!</h1>;
}
return (
<div>
<p>데아터 보여주기</p>
<p>{data}</p>
</div>);
}
export default Data;
- useQuery의 첫번째 인자로, 배열인 queryKey가 들어가고 두 번째 인자로 Promise 객체를 반환하는 함수가 들어가게 된다.
🥗 두 번째 인자에 사용될 수 있는 ajax 라이브러리로 fetch, axios 등이 있다.
- queryKey는 useQuery가 캐싱을 관리할 수 있도록 도와주는 유일한 키이다.
🥗 동일한 queryKey의 값은 다시 서버에 요청을 보내지 않는다. 맨 처음의 요청의 결과, 이미 캐싱된 값을 사용한다.
- 추가적인 세 번째 인자로 options이 들어갈 수 있다.
🥗 위와 같이 세 번째 인자로 refetchInterval를 설정하여 실시간으로 데이터를 계속 받아올 수 있다.
- 만약 데이터가 로딩중이라면, isLoading/isFetching가 true가 된다.
🥗 isLoading는 캐시가 없을 때, isFetching는 캐시에 유무에 상관없이.
- error가 발생하면, 그 정보가 error에 담긴다.
- fetch가 성공하면 그 데이터는 data에 담기게 된다.
- enabled옵션이 있으면, 해당 변수가 true인 경우에만 useQuery가 실행된다.
🥗 캐싱 기능을 사용하고자 한다면 staletime을 설정하여 캐싱을 적용할 시간을 정하고, cachetime으로 얼마나 이 캐시가 유효한지 설정한다.
🥗 반환되는 refetch 함수를 호출하면, 해당 쿼리를 다시 실행한다.
☕ 캐싱이 된 데이터는 queryClient에 저장되며, useQueryClient를 통해서 이를 확인할 수 있다.
import { useQueryClient } from '@tanstack/react-query';
export default function App(){
...
const queryClient = useQueryClient();
console.log('queryClient', queryClient);
}
위의 콘솔값의 결과로 리턴되는 객체를 살펴보면, queryCache 프로퍼티를 확인할 수 있고 내부 queriesMap에 설정한 각각의 queryKey에 해당하는 캐싱된 데이터가 있는 것을 확인할 수 있다.
🍌 서버에서 단순히 데이터를 조회하는 것이 아니라, 데이터의 추가/수정/삭제가 필요할 땐, useQuery가 아니라 useMutation를 사용한다.
🍌 위의 코드를 바탕으로, 빗썸 open api를 통해 거래 정보를 실시간으로 보여주는 간단한 웹사이트를 만들어 보았다.
- 깃허브 주소 : https://github.com/citron03/realtime_coin_transaction_history
- 참고한 리액트 쿼리 공식 문서 : https://react-query.tanstack.com/overview
Overview | TanStack Query Docs
React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze. Motivation
tanstack.com
GitHub - citron03/realtime_coin_transaction_history: 실시간으로 계속 데이터를 받아와 실시간 암호화폐 거래
실시간으로 계속 데이터를 받아와 실시간 암호화폐 거래 내역을 보여주는 기능을 react query를 통해 구현해 보았다. - GitHub - citron03/realtime_coin_transaction_history: 실시간으로 계속 데이터를 받아와 실
github.com
'React' 카테고리의 다른 글
코드 깔끔하게 작성하기 (리액트, Styled-Components) (0) | 2022.11.10 |
---|---|
SuperAgent로 API 호출하기 (0) | 2022.11.10 |
간단한 Recoil 사용법 (0) | 2022.11.06 |
Redux를 이용하여 React 다크 모드 기능 구현하기 (with. styled-components) (0) | 2022.11.05 |
Redux Toolkit (rtk) 사용하기 (0) | 2022.11.04 |