React에서 비동기를 쉽게 다루게 해주는 라이브러리이다. 데이터를 서버에서 가져오고 그 데이터를 모든 컴포넌트에서 사용 가능하게 캐싱하거나, 데이터 패칭 등을 지원한다.
캐싱 : 예를들어 /user/2에 10초 전에 요청을 한 적이 있다면 그 때 불러온 데이터를 보여줄 수 있다. (이전에 loading을 해서 처리했던 부분이 더 빨리 진행되어 안보인다!)
편리한 기능 : data, isLoading, isSuccess, isError 등등을 사용할 수 있다.
- 전역 상태를 건드리지 않고도 캐시하고 업데이트 할 수 있다.
- React Query에 데이터를 가져올 위치와 데이터가 얼마나 필요한지 알려주면 즉시 캐싱, 백그라운드 업데이트 및 오래된 데이터를 처리한다.
- 설치 : npm install react-query -> npm install @tanstack/react-query
- react-query가 버전이 바뀌어서 @tanstack/react-query로 해야 오류가 나지 않는다. 사용법은 같다
React Query를 사용하기 위해서는 우선 사용하고자 하는 컴포넌트를 <QueryClientProvider> 컴포넌트로 감싸주고 provider를 만들어주어야 한다. client props는 필수이다.
QueryClientProvider 안에 있는 모든 것은 queryClient에 접근할 수 있다.
import {QueryClient,QueryClientProvider} from '@tanstack/react-query';
...
const queryClient = new QueryClient()
<QueryClientProvider client={queryClient}>
<Todos />
</QueryClientProvider>
...앱 전체에서 사용하고자하면 최상위 컴포넌트에 감싸주면 된다.
react - query는 useEffect와 fetch, loading을 이용하는 많은 과정을 생략시켜 준다.
react-query를 이용해서 데이터 패칭을 할 때는 useQuery hooks를 사용하면 된다.
useQuery의 첫번째 인자에는 문자열 혹은 배열값인 queryKey 값을 받게 되어있는데, 해당 queryKey 값으로 데이터를 캐싱하게 된다.
useQuery(['post',1],...)
useQuery(['pst',2],...)[예제]
- isIdle 값은 enabled가 true가 될 때까지, fetch가 시작되기 전까지 true입니다.
- idle : 쿼리 data가 하나도 없고 비었을 때. {enabled : false} 상태로 쿼리가 호출되었을 때 이 상태로 시작된다.
- users.ts : axios를 이용해서 users.ts에서는 api를 받아온다. 여기서 data는 User의 배열 타입으로 지정해주고, interface를 통해서 형을 저장해준다.
//users.ts
import axios from 'axios';
const BASE_URL = '<https://jsonplaceholder.typicode.com>';
export interface User{
id:number;
name:string;
username:string;
email:string;
address:Address;
phone:string;
website:string;
company:Company;
}
interface Address{
street:string;
suite:string;
city:string;
zipcode:string;
geo:Geo;
}
interface Geo{
lat:string;
lng:string;
}
interface Company{
name:string;
catchPhrase:string;
bs:string;
}
const axiosUsers = async () =>{
const response = await axios.get(`${BASE_URL}/users`);
const data:User[] = response.data;
return data;
}
export {axiosUsers};
- Users.tsx : user에 있는 정보를 useQuery 훅을 통해서 받아온다.
// users.tsx
import {useQuery} from 'react-query';
import {axiosUsers} from '../api/users';
const Users = () => {
const usersQuery = useQuery('users',axiosUsers);
if(usersQuery.isLoading || usersQuery.isIdle){
return <div>loading...</div>;
}
if(usersQuery.isError){
return <div>Error...</div>;
}
return (
<div>
{usersQuery.data.map((user)=>{
return <div key={user.id}>{user.username}</div>
})}
</div>
)
}
export default Users;
- App.tsx : React Query를 사용하기 위해서는 QueryClientProvider로 컴포넌트를 둘러싼다.
// App.tsx
import {QueryClient,QueryClientProvider} from 'react-query';
import Users from './components/Users';
const queryClient = new QueryClient();
function App() {
return (
<QueryClientProvider client={queryClient}>
<Users />
</QueryClientProvider>
);
}
export default App;
+) 가지고 있는 기능
Devtools : render할 수 있는 component이고 React query에 있는 devtools를 import 해오면 캐시에 있는 query를 볼 수 있다.
@tanstack/react-query로 바뀌면서 @tanstack/react-query-devtools를 따로 설치해야 한다.
'프론트엔드 > React' 카테고리의 다른 글
| [React] [React-router-dom v6] v5에서 변경된 점 (0) | 2022.08.15 |
|---|---|
| [React] React Hooks must be called in the exact same order in every component render. (0) | 2022.02.27 |
| [React] useState 를 object 특정 값 변경에 사용하기 (0) | 2022.01.12 |
