React에서의 Fetching 전략 – React Query, SWR, Axios

 왜 Fetching 전략이 중요한가?

React 애플리케이션에서는 서버에서 데이터를 가져와서 화면에 보여줘야 하는 일이 많습니다.
이때 단순히 fetch()나 axios.get()만 사용하는 방식은 다음과 같은 문제를 만듭니다:

• 로딩 상태 / 에러 상태 관리 어려움
• 중복 요청 문제
• 데이터 캐싱 없음
• 서버 상태와 클라이언트 상태 분리 어려움

 그래서 등장한 것이 데이터 패칭을 전문적으로 관리해주는 라이브러리들, 대표적으로:

• React Query
• SWR
• 그리고 여전히 많이 쓰이는 Axios (기본 통신 도구)

Axios – 기본 중의 기본

import axios from "axios";
import { useEffect, useState } from "react";

function Post() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get("/api/posts/1").then((res) => setData(res.data));
  }, []);

  return <div>{data?.title}</div>;
}

 

• 장점: 사용법이 간단하고, 커스터마이징 가능 (interceptors, header 설정 등)
• 단점: 로딩/에러/캐싱 등 상태 관리 직접 구현해야 함

 Axios는 "데이터 요청 도구"일 뿐, 상태 관리 도구는 아님

---

SWR – Next.js와 찰떡궁합

 

SWR = Stale-While-Revalidate

import useSWR from "swr";
import axios from "axios";

const fetcher = (url) => axios.get(url).then((res) => res.data);

function Profile() {
  const { data, error, isLoading } = useSWR("/api/user", fetcher);

  if (isLoading) return <div>로딩중...</div>;
  if (error) return <div>에러 발생!</div>;

  return <div>{data.name}</div>;
}

 

SWR의 핵심 기능

• 자동 캐싱 및 갱신
• 포커스 시 자동 재요청 (refetchOnFocus)
• 서버와 클라이언트 상태 일치
• Next.js App Router와 잘 어울림

 

---

React Query – 상태 관리까지 책임지는 슈퍼 라이브러리

 

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

function Todos() {
  const { data, isLoading, error } = useQuery({
    queryKey: ["todos"],
    queryFn: () => axios.get("/api/todos").then((res) => res.data),
  });

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>에러!</div>;

  return <ul>{data.map((todo) => <li key={todo.id}>{todo.title}</li>)}</ul>;
}

 

React Query의 강력한 기능

•  자동 캐싱 / 무효화 / 재요청
•  병렬/의존성 쿼리, Infinite Query 등 지원
•  Mutation 기능 (POST, PUT, DELETE)
•  쿼리 상태 로깅 Devtool 지원
•  SSR 지원 (Hydration)