리액트 쿼리는 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 만든다.
API를 가져올 때 사용하는 코드를 몇 줄만으로 줄일 수 있다.
우선 npm i react-query 로 설치해준 다음에
다음과 같이 기본 세팅한다.
import { QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient();
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Home />
</QueryClientProvider>
);
}
useQuery를 사용하면 isLoading, data 값을 더 쉽게 가져올 수 있다.
첫번째 인자에는 유니크한 값, 두번째 인자에는 promise를 반환하는 함수(fetcher)를 넣어주어야 한다.
const [isLoading, data] = useQuery("allData", fetcher);
이 방식으로 데이터를 가져오면 데이터를 캐싱하기 때문에 한번만 가져온 다음에는 로딩없이 가져온다.
데이터를 가져오는데 지연이 일어나지 않는 것이다.
'개발 > react' 카테고리의 다른 글
Recoil은 부모-자식 prop의 전달 문제를 해결한다! (0) | 2022.11.21 |
---|---|
TypeScript에서 Obejct 타입을 선언할 때 interface를 사용! (0) | 2022.11.13 |
TypeScript는 개발자의 실수를 막아준다! (0) | 2022.11.13 |
Styled components 상속받기를 통해 중복을 줄인다! (0) | 2022.11.12 |
Styled components로 css를 적용하면 더 편리하다! (0) | 2022.11.12 |