티스토리 뷰

사이드 프로젝트를 진행하면서 기존에 Recoil로만 처리하는 것 대신, React Query를 사용해야겠다는 생각이 들었다. 프로젝트 특성상 API를 호출 할 일이 잦다는 것이 그 이유이다.
그럼 오늘은 React Query를 왜 사용하고, 어떻게 사용해야 하는지에 대해서 알아보자.
🤷♂️React Query
React-query란 데이터 Fetching, Caching, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어주는 라이브러리이다.
👏 React Query의 장점
- 기존의 Recoil과 같은 상태관리 라이브러리를 사용 할 때 BoilerPlate 형태의 코드가 많이 발생한다. 반면 React Query는 비교적 코드의 양이 적으며, 구조도 단순하여 유지 보수가 용이하다는 장점이 있다.
- 동일한 요청에 대하여 API를 재호출 할 필요 없이 Caching을 통해 애플리케이션의 속도를 향상 시킨다.
- 오래된 데이터의 상태를 파악해 updating을 지원한다.
- Garbage Collection을 이용하여 서버 쪽 데이터 메모리를 관리해준다.
- BoilerPlate: 여러 곳에서 재사용되지만, 반복적인 코드로 인해 많은 양의 코드를 양산하는 것.
🕵️♂️React Query 사용 방법
자 그럼 React Query를 사용하지 않았을 때와 비교해가면서 사용법을 익혀보자.
React Query를 사용하기 위해선 우선 패키지 설치를 해주어야 한다.
- npm
npm i react-query
npm i @types/react-query
- yarn
yarn add react-query
yarn add @types/react-query
설치가 완료되었다면, index.tsx 파일로 들어가보자!
- index.tsx
import { QueryClient, QueryClientProvider } from "react-query";
// create client
const queryClient = new QueryClient();
ReactDOM.render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</React.StrictMode>,
document.getElementById("root")
);
QueryClientProvider는 client prop을 필요로 한다. 생성한 client를 prop으로 넘겨주자. 이렇게 하면 QueryClientProvider의 하위 컴포넌트들은 모두 queryClient에 접근이 가능해진다.자! 이제 이렇게 React Query를 사용하기 위한 모든 준비가 끝났다. 실제로 코드를 작성해보면서 사용 방법을 익혀보자.
- Coins.tsx (전)
function Coins() {
const [coins, setCoins] = useState<CoinInterface[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
(async () => {
const response = await fetch("https://api.coinpaprika.com/v1/coins");
const json = await response.json();
setCoins(json.slice(0, 100));
setLoading(false);
})();
}, []);
// return 생략
}
해당 코드는 코인에 대한 데이터들을 API 호출을 통해 서버로부터 가져오는 코드이다. React Query를 이용하면 코드의 양을 줄여 가독성을 훨씬 좋게 만들어 줄 수 있다. 우선 파일 하나를 새로 만들자.
- api.ts
export function fetchCoins() {
return fetch("https://api.coinpaprika.com/v1/coins").then((response) =>
response.json()
);
}
api.ts 라는 파일을 만든다. 파일 안에는 Promise chaining을 이용해 API를 호출하는 코드를 작성한 후, return 해준다.
- Coins.tsx (후)
import { fetchCoins } from "../api";
import { useQuery } from "react-query";
function Coins() {
const { isLoading, data } = useQuery<ICoin[]>(["allCoins"], fetchCoins);
// return 생략
}
isLoading은 캐시된 데이터가 없이, 처음 실행된 Query 일 때 로딩 여부에 따라 true/false로 나뉘어 지며, data에는 호출된 fetchCoins를 이용해 서버로부터 가져온 데이터들이 저장된다.
["allCoins"] 는 쿼리를 구분 할 수 있도록 해주는 key값이다.
기존의 Coins.tsx 파일과 비교해보면 코드의 양도 적어졌으며, 가독성 또한 좋아진 것을 확인 할 수 있다!
'개발' 카테고리의 다른 글
[개발] 리액트로 Compound Component(합성 컴포넌트) 적용해보기 (4) | 2023.10.09 |
---|---|
[React] ThemeProvider 알아보기 (2) | 2023.08.23 |
[React] children 알아보기 (2) | 2023.08.17 |
Netlify 배포 후 새로고침시 404 에러 (0) | 2023.08.09 |
프론트엔드 로그인 개념 (1) | 2023.07.04 |
- Total
- Today
- Yesterday