🚀 React Query를 활용한 API 요청 최적화

🚀 React Query를 활용한 API 요청 최적화

불필요한 API 요청을 줄이고, 상태 관리를 자동화하는 방법!

프론트엔드에서 API 데이터를 가져올 때 대부분 useEffect와 useState를 사용합니다. 하지만 매번 API 요청을 보낸다면 성능이 떨어지고, 데이터 관리도 복잡해집니다.

이를 해결하기 위해 React Query를 사용하면 자동 캐싱, 상태 관리, 리패칭 최적화 등을 쉽게 구현할 수 있습니다.

---

✅ React Query란?

React Query는 서버 상태를 효율적으로 관리할 수 있도록 도와주는 라이브러리입니다.
useQuery와 useMutation을 사용하면 API 요청을 쉽게 최적화할 수 있습니다.

---

🎯 React Query의 핵심 기능

1️⃣ 자동 캐싱 (Automatic Caching)

• 동일한 요청을 반복하면 캐시된 데이터를 재사용하므로 불필요한 API 요청이 줄어듭니다.
• 일정 시간 동안 새로고침해도 서버에 요청을 보내지 않고 캐시된 데이터를 반환합니다.

2️⃣ 백그라운드 리패칭 (Background Fetching)

• 자동으로 최신 데이터로 업데이트할 수 있습니다.
• 오래된 데이터(stale)가 되면 백그라운드에서 자동으로 새로운 데이터를 가져옵니다.

3️⃣ 로딩 및 오류 상태 자동 관리

• isLoading, isError 상태를 자동으로 관리해주므로 별도의 useState를 사용할 필요가 없습니다.

4️⃣ 의존성 배열 없이 데이터 가져오기

• 기존 useEffect와 달리 의존성 배열([])을 관리하지 않아도 자동으로 데이터가 업데이트됩니다.

5️⃣ staleTime과 cacheTime을 활용한 성능 최적화

• staleTime: 새로운 요청을 보내지 않고 데이터를 신선하게 유지하는 시간
• cacheTime: 캐시에 데이터를 유지하는 시간

---

🚀 React Query 사용법

1️⃣ React Query 설치

npm install @tanstack/react-query

2️⃣ QueryClient 설정 (최상위 컴포넌트에서 적용)

index.js 또는 App.js에서 QueryClientProvider를 설정해야 합니다.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </QueryClientProvider>
  );
}

---

✅ useQuery를 사용한 API 요청 최적화

useEffect 대신 useQuery를 사용하여 데이터를 가져오면 자동 캐싱 및 리패칭이 가능해집니다.

import { useQuery } from '@tanstack/react-query';
import instance from '../axiosConfig';

const fetchFaqs = async () => {
  const response = await instance.get('/faq/getAll');
  return response.data.data;
};

const Faq = () => {
  const { data, isLoading, isError } = useQuery({
    queryKey: ['faqs'],  // 캐싱을 위한 key
    queryFn: fetchFaqs,  // API 요청 함수
    staleTime: 60000,     // 1분 동안 데이터 유지
    cacheTime: 300000,    // 5분 동안 캐시 유지
  });

  if (isLoading) return <p>로딩 중...</p>;
  if (isError) return <p>데이터를 가져오는 중 오류 발생!</p>;

  return (
    <div>
      <h2>FAQ 리스트</h2>
      <ul>
        {data.map((faq) => (
          <li key={faq.id}>
            <strong>{faq.question}</strong>
            <p>{faq.answer}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Faq;

---

📌 staleTime과 cacheTime의 차이점

설정값 설명

staleTime	데이터를 "신선한 상태(fresh)"로 유지하는 시간 (이 동안 새 요청 X)
cacheTime	데이터가 캐시에서 유지되는 시간 (캐시가 삭제되기 전까지 재사용)

🎯 예제 시나리오 (staleTime: 1분, cacheTime: 5분)

시간 요청 발생 여부 설명

0초	✅ 요청 발생	최초 API 요청 실행
30초	❌ 요청 없음	staleTime(1분) 안에 있으므로 캐시 사용
1분	✅ 요청 발생	staleTime 만료로 백그라운드 요청 실행
3분	❌ 요청 없음	여전히 cacheTime(5분) 내에 있음
5분	✅ 요청 발생	cacheTime 만료로 캐시 삭제 후 새 요청

---

✅ useMutation을 사용한 POST 요청

useQuery는 GET 요청을 위한 것이고, 데이터를 수정하거나 추가할 때는 useMutation을 사용해야 합니다.

import { useMutation } from '@tanstack/react-query';
import instance from '../axiosConfig';

const postData = async (newItem) => {
  const response = await instance.post('/api/items', newItem);
  return response.data;
};

const CreateItem = () => {
  const mutation = useMutation({
    mutationFn: postData,
    onSuccess: () => {
      alert('데이터가 성공적으로 추가되었습니다!');
    },
  });

  const handleSubmit = () => {
    const newItem = { name: '새로운 아이템' };
    mutation.mutate(newItem);
  };

  return (
    <button onClick={handleSubmit}>
      {mutation.isLoading ? '추가 중...' : '아이템 추가'}
    </button>
  );
};

---

🔥 React Query를 사용하면 좋은 이유

1️⃣ API 요청을 최소화

• 동일한 데이터를 여러 번 요청해도 자동으로 캐싱하여 불필요한 API 호출을 줄임

2️⃣ 데이터 상태 관리가 편리함

• isLoading, isError, isFetching 등을 활용하여 별도 상태 관리가 필요 없음

3️⃣ 자동으로 최신 데이터 유지

• staleTime 설정을 통해 최적의 시점에 데이터를 다시 가져올 수 있음

4️⃣ 로딩, 에러 핸들링이 자동화됨

• useQuery와 useMutation을 사용하면 로딩 및 에러 상태를 자동으로 처리

---

🚀 결론

React Query를 사용하면 프론트엔드에서 API 요청을 최적화하고, 불필요한 상태 관리 없이 데이터를 쉽게 가져올 수 있습니다. 특히 staleTime과 cacheTime을 적절히 설정하면 API 성능 최적화 + 자동 리패칭이 가능하여 사용자 경험이 더욱 향상됩니다.

🔥 React Query를 활용해서 더 빠르고 최적화된 애플리케이션을 만들어 보세요! 🚀

---

이제 티스토리 블로그에 그대로 올려도 될 정도로 깔끔하게 정리되었습니다!
혹시 추가할 내용이 있으면 말해주세요. 😊