[React Query] React Query 설치 및 사용 방법
npm i react-query
먼저 react query를 설치하는데 여기서는 v3를 사용했다.
react query의 useQuery hook을 실행하여 서버에서 데이터를 가져오려고 한다.
https://jsonplaceholder.typicode.com/
JSONPlaceholder - Free Fake REST API
{JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month.
jsonplaceholder.typicode.com
예시로 fetchPosts 함수를 사용해서 JSONPlaceholder 서버에서 게시물을 가져오도록 하겠다.
먼저 App에서 React Query용 쿼리 클라이언트를 만들고 모든 자식 컴포넌트가 클라이언트를 사용할 수 있게 하는QueryProvider를 추가한다.
이제 이 안에 있는 모든 컴포넌트는 React Query Hook을 사용할 수 있다.
Posts 컴포넌트에서 useQuery를 가져오는데 이 useQuery는 서버에서 데이터를 가져올 때 사용할 훅이다.
useQuery는 다양한 속성을 가진 개체를 반환하는데 지금은 data를 구조 분해한다.
useQuery는 몇 가지 인수를 사용하는데 첫 번째는 쿼리 키, 두 번째는 쿼리 함수이다.
쿼리 키는 쿼리 이름을 쿼리 함수는 이 쿼리에 대한 데이터를 가져오는 방법을 뜻한다.
데이터는 fetchPosts에서 반환된 데이터가 되고 쿼리 함수의 HTTP 요청에서 반환된 JSON이 된다.
fetchPosts가 비동기식이기때문에 데이터가 정의되지 않은 경우 조기 반환하여 오류를 해결한다.
useQuery에서 반환되는 객체는 더 다양한 속성이 있는데 isLoading과 isError는 데이터가 로딩 중인지 여부와 데이터를 가져올 때 오류가 있는지 여부를 불리언으로 반환한다.
빈 div를 반환하는 대신 로드 중인지 확인할 수 있다.
에러를 발생시키면 로딩을 포기하기 전까지 총 세 번의 요청을 시도한다.
시도 횟수는 변경할 수 있지만 React Query는 기본값으로 세 번 시도한 후에 해당 데이터를 가져올 수 없다고 판단한다.
isError 불리언을 반환하는 것 외에도 반환 객체에는 쿼리 함수에서 전달하는 오류인 error도 있다.
error를 string으로 변환하면 TypeError: Failed to fetch가 표시되는 것을 볼 수 있다.
'Frontend > React Query' 카테고리의 다른 글
[React Query] Mutation 개념 (0) | 2023.11.29 |
---|---|
[React Query] Prefetching 개념 (2) | 2023.11.28 |
[React Query] Query key 개념 (1) | 2023.11.27 |
[React Query] React Query Devtools 사용법 (0) | 2023.11.26 |
[React Query] React Query 개념 및 장점 (0) | 2023.11.24 |
댓글