둔필승총

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를 따로 설치해야 한다.