React-Query 사용 방법

0. React-Query

🔸정의 및 특징

- 기존의 client state 를 다루는 라이브러리는 Redux,MobX,Zustand 가 있다. 이러한 라이브러리는 클라이언트 애플리케이션의 상태를 중앙 집중화하고 전역으로 관리한다. 대부분 이런 상태 관리 라이브러리를 사용하며 클라이언트 상태와 서버 상태를 함께 담아주고 있는 경우가 대부분이다. 

- 반면, Tanstack Query 는 서버 상태와의 상호작용을 중심으로 하는 상태관리 라이브러리이다. (서버 데이터 상태관리)

- react-query를 사용해 서버 상태를 관리한다면 클라이언트 상태를 분리하여 관리할 수 있기 때문에 직관적이고 효율적인 관리가 가능해진다. 

- Caching 지원

- 동일한 데이터에 대한 중복 요청을 제거하고 한 번만 요청하도록 함.

- 'out of data' 상태의 데이터를 파악하고 updating 지원(데이터를 자동으로 재요청하여 클라이언트와 서버간의 데이터 일관성을 유지하려고 노력)

- pagination 및 Lazy Loading 성능 최적화

- Server State 의 메모리 관리 및 garbage collection 지원

- React Hooks 와 유사한 인터페이스 제공

 

※ 클라이언트 상태 (Client State)

- UI 상태(드롭다운이 열렸는지, 닫혔는지, 모달이 활성화 되어있는지 등),Form 의 상태(특정 입력 필드의 값) 등이 있다.

클라이언트 상태는 애플리케이션 내에서 동기적으로 접근 가능하고, 그 변화는 대체로 예측이 가능하다. 이는 서버에서 받아온 데이터(서버상태) 와는 대조적인 특징으로, 서버상태는 비동기적으로 받아와야하며 그 변화를 예측하기 힘들다. 

 

※ 서버 상태 (Server State)

- 애플리케이션에서 필요한 외부 데이터의 상태

- API 를 통해 비동기적으로 로드되는 데이터를 포함하며, 이러한 데이터는 변경이 잦고, 예측할 수 없고 동기적으로 엑세스 할 수 없다. 

- Client 가 제어하거나 소유하지 않는 위치에서 원격으로 유지됨

- 주의하지 않으면 애플리케이션이 잠재적으로 "out of date" 상태가 될 수 있음(클라이언트에서 가지고 있는 서버데이터의 상태가 서버의 현재 데이터 상태와 일치하지 않을 수 있음을 나타냄, ex:여러 사용자가 동시에 같은 데이터에 접근하고 변경할 수 있는 경우, 한 사용자의 클라이언트가 가지고 있는 데이터는 다른 사용자에 의해 변경된 서버의 데이터 상태와 일치하지 않을 수 있다. 이는 사용자가 본래 알고 있던 정보와 현재 서버에 저장된 정보가 다르기 때문에, 이를 "out of date" 상태라고 함)

 

🔸Server State 를 모델링 하는 과정

• Fetching
  초기 상태이며 백엔드와 같은 외부 소스로부터 데이터를 가져오기 위해 동작.
• Fresh
  Fetching 이후에 Server-side와 Client-side의 데이터가 동일하게 유지되는 상태.
• Stale
  데이터가 오래된 상태이며 Fetching을 통해 Fresh 상태로 유지해줘야 함.
• Inactive
  애플리케이션에서 사용되지 않는 데이터에 대한 상태.
  React Query에서 브라우저 캐시를 관리하는 가비지 컬렉터에 의해 삭제 됨.
• Deleted
  Inactive 상태의 데이터가 캐시에서 삭제된 상태.

 

1. React-Query 사용 방법

 

1) App.jsx 에 가서 아래와 같이 생성한다.

- QueryClient를 생성하고 초기화한다. QueryClient 는 내장 캐시 저장기능과 react-query 의 훅을 쓸 수 있다. 
- QueryClientProvider 컴포넌트를 사용하여 QueryClient를 전달한다.

import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import PostList from './PostList';

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <PostList />
    </QueryClientProvider>
  );
};

export default App;

2) PostList.jsx 에 가서 아래와 같이 작성한다.

- useQuery 훅을 사용해서 데이터 fetching을 할 수 있다. 

import axios from "axios";
import { useQuery } from "react-query";

const fetchPosts = async () => {
  const response = await axios.get(
    "https://jsonplaceholder.typicode.com/posts"
  );
  return response.data;
};

const PostList = () => {
  const { isLoading, isError, data, error } = useQuery("posts", fetchPosts);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>Posts</h1>
      {data.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default PostList;

 

🔸useQuery의 인자

useQuery(1) 쿼리 식별자, 2) 데이터를 가져오는 비동기함수, 3) 옵션객체)

1) 쿼리 식별자 

- 쿼리를 식별하는 문자열 또는 숫자값

- 쿼리를 구분하고 캐시에 저장된 데이터를 관리하는데 사용

2) 데이터를 가져오는 비동기 함수

- 실제 데이터를 가져오는 함수

- 비동기 함수이며 Promise 나 async/awiat를 사용할 수 있다.

- 함수가 호출되면 데이터를 가져오고, 이를 React Query 가 캐싱하고 관리한다.

3) 옵션 객체

- useQuery 에 대한 추가적인 옵션

- enabled, refetchOnWindowFocus, retry, onSuccess, onError 등과 같은 옵션들을 설정 할 수 있음

 

🔸useQuery 의 값

- useQuery 훅은 React Query에서 제공하는 다양한 값들을 반환한다. 이 값들을 사용하여 데이터 로딩 상태, 오류 처리, 캐싱된 데이터 등을 다룰 수 있다.

[대표적인 useQuery 값]

1) data (any): 요청에 대한 응답으로 가져온 데이터이다. 성공적으로 데이터를 가져온 경우에만 값이 채워진다.
2) isLoading (boolean): 데이터를 가져오는 중인지 여부를 나타내는 상태값, 데이터 요청이 진행 중인 동안 true로 설정되고, 데이터 요청이 완료되면 false로 변경됨
3) isError (boolean): 데이터 요청 중 오류가 발생했는지 여부를 나타내는 상태값. 오류가 발생한 경우 true로 설정되고, 오류가 없거나 오류 처리가 완료된 경우 false로 변경.
4) error (Error): 데이터 요청 중 발생한 오류에 대한 정보를 담고 있는 오류 객체. 오류가 발생하지 않은 경우 undefined입니다.
5) refetch (function): 데이터를 다시 가져오는 함수. 이 함수를 호출하면 쿼리를 재요청하고 캐시된 데이터를 갱신 6) isFetching (boolean): 데이터를 다시 가져오는 동안 refetch 함수가 실행되는지 여부를 나타내는 상태값.  refetch 함수가 실행되면 true로 설정되고, 요청이 완료되면 false로 변경된다.

 

 

 

코드박스 주소

https://codesandbox.io/s/react-query-9cy3kz?file=/src/PostList.js:0-676 

react-query - CodeSandbox

 

 

---

참고자료

https://lasbe.tistory.com/163

[React] react-query, 리액트 쿼리를 사용해야 하는 이유

https://freestrokes.tistory.com/170