[React] React-Query???? 그게 뭔데???!!

저는 얼마 전 블로그를 둘러보다가 React-Query라는 것을 보고 알아보며 정말 좋은 라이브러리라고 생각이 들어서 이렇게 더 잘 정리해서 사용하기 위해 오늘 이렇게 글을 쓰게 되었습니다 

---

React-Query🌸가 뭘까?

공식 문서에서는 React-Query를 이렇게 설명하고 있습니다

fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리

쉽게 말하자면 fetching, caching과 관련된 비동기관련 처리과정을 도와주는 라이브러리입니다

---

 

❓ 왜 사용할까?

• 간편한 데이터 관리( 데이터 가져오기, 캐싱, 동기화 및 업데이트 처리를 간편)
• 실시간 업데이트 및 동기화(서버와 클라이언트의 데이터 일관성 유지)
• 데이터 캐싱(불필요한 요청 감소, 성능 향상)
• 서버 상태 관리(에러, 로딩, 성공 쉽게 처리)
• 간편한 설정

---

🎯 사용법

1. 설치하기

npm install @tanstack/react-query @tanstack/react-query-devtools

이렇게 react-query를 설치해줍니다 dev-tools는 선택사항이긴 하지만 devtools을 사용하면 패칭한 데이터를 쉽게 관리할 수 있습니다

옵션들

• queryKey: 데이터를 식별하는 키(필수)
• queryFn: 데이터를 fetching하는 비동기 함수(필수)
• enabled: 쿼리 실행 여부를 제어(자동으로 실행되지 않게 막음)
• retry: 실패한 쿼리가 있다면 재시도하는 옵션(기본적으로 쿼리 실패시 3번 재시도)
• staleTime: fresh한 상태가 유지되는 시간(default staleTime은 0이고 fresh 상태에서는 쿼리가 다시 mount 되어도 fetch가 실행되지 않음)
• chacheTime: inactive한 상태인 캐시 데이터가 메모리에 남아있는 시간(default cacheTime 은 5분)
• onSuccess: 쿼리 성공 시 실행되는 함수(매개변수는 성공 시 서버에서 넘어오는 response)
• onError: 쿼리 실패 시 실행되는 함수( 매개변수로 에러 값을 받을 수 있음)
• refetchOnWindowFocus: 데이터가 stale 상태일 경우 윈도우 포커싱 될 때 마다 refetch를 실행하는 옵션
• refetchOnMount: 데이터가 stale 상태일 경우 마운트 시 마다 refetch를 실행하는 옵션

useQuery

데이터를 GET하기 위한 api에 쓰고 첫번째 파라미터로 unique Key가 들어가고, 두번째 파라미터로 비동기 함수(api호출 함수)가 들어갑니다 return 값은 api의 성공, 실패 여부, api return 값을 포함한 객체입니다 

 

 

예시

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

const fetchData = async () => {
  const { data } = await axios.get('https://api.example.com/data');
  return data;
};

const MyComponent = () => {
  const { data, error, isLoading } = useQuery('myData', fetchData);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading data</div>;

  return (
    <div>
      <h1>Fetched Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

 

---

useMutation

값을 바꿀 때 사용하고 return 값은 useQuery와 동일합니다

 

예시

import { useMutation } from 'react-query';
import axios from 'axios';

const postData = async (newData) => {
  const response = await axios.post('https://api.example.com/', newData);
  return response.data;
};

const Example = () => {
  const mutation = useMutation(postData);

  const handleSubmit = () => {
    mutation.mutate({ name: 'BAE', age: 17 });
  };

  if (mutation.isLoading) return <div>loading...</div>;
  if (mutation.isError) return <div>Error</div>;
  if (mutation.isSuccess) return <div>성공함!!</div>;

  return (
    <div>
      <button onClick={handleSubmit}>제출!</button>
    </div>
  );
};

export default Example;

---

글을 마치며

오늘은 React Query에 대해 이야기해 보았는데요 여러 가지 장점을 가진 React Query 라이브러리를 통해 더 간편하고 효율적으로 서버와 소통할 수 있었으면 좋겠습니다