서버 상태 관리 전략과 axios / fetch / TanStack Query 정리

프론트엔드 개발을 하다 보면 “서버에서 데이터를 어떻게 가져오고 관리할 것인가?”라는 고민을 반드시 하게 된다.
이 글에서는 기존 방식(useEffect 기반)부터 axios, fetch, 그리고 요즘 실무에서 많이 사용하는 TanStack Query까지 흐름 중심으로 정리한다.

---

1️⃣ 기존 방식: useEffect + fetch/axios

가장 기본적인 데이터 요청 방식은 useEffect를 사용하는 것이다.

const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

useEffect(() => {
  setLoading(true);
  fetch('/api/cafes')
    .then(res => res.json())
    .then(setData)
    .catch(setError)
    .finally(() => setLoading(false));
}, []);

✅ 특징

• 컴포넌트가 마운트될 때 데이터 요청
• 상태(useState)를 직접 관리

❗ 문제점

• 로딩, 에러 상태를 매번 직접 관리해야 함
• 동일한 API를 여러 컴포넌트에서 호출하면 중복 요청 발생
• 캐싱 없음 → 매번 서버 요청
• 재요청(refetch) 로직 직접 구현해야 함

👉 즉, 규모가 커질수록 코드가 지저분해지고 관리가 어려워진다

---

2️⃣ fetch

📌 fetch란?

브라우저에 내장된 기본 HTTP 요청 API

const res = await fetch('/api/cafes');
const data = await res.json();

✅ 장점

• 별도 설치 필요 없음
• 가볍고 표준 API
• 최신 브라우저 & Node.js 지원

❗ 단점

• JSON 변환 수동 (res.json())
• 에러 처리 불편 (res.ok 확인 필요)
• 인터셉터 없음 (토큰 처리 번거로움)

---

3️⃣ axios

📌 axios란?

HTTP 요청을 더 편하게 해주는 라이브러리

const { data } = await axios.get('/api/cafes');

✅ 장점

• 자동 JSON 변환
• 에러 처리 쉬움
• interceptors 지원 (토큰, 공통 헤더 처리)
• 코드 간결

❗ 단점

• 라이브러리 추가 필요
• fetch 대비 필수는 아님

---

🔥 fetch vs axios 정리

항목	fetch	axios
설치	❌ 필요 없음	✅ 필요
JSON 변환	수동	자동
에러 처리	불편	편함
인터셉터	없음	있음
사용성	기본	편리

👉 결론:

• 간단 → fetch
• 편의성 → axios

---

4️⃣ TanStack Query (React Query)

📌 TanStack Query란?

서버 데이터를 가져오고, 캐싱하고, 관리까지 자동으로 해주는 라이브러리

---

기존 방식 vs TanStack Query

❌ 기존

useEffect(() => {
  fetch(...).then(...)
}, []);

✅ TanStack Query

const { data, isLoading, error } = useQuery({
  queryKey: ['cafes'],
  queryFn: () => fetch('/api/cafes').then(res => res.json()),
});

---

💥 TanStack Query의 핵심 장점

1️⃣ 캐싱 (가장 중요)

• 한 번 가져온 데이터 저장
• 동일 요청 시 서버 요청 없이 재사용

👉 UX 속도 향상

---

2️⃣ 자동 refetch

• 창 다시 포커스 시
• 네트워크 복구 시
• 설정 시간 경과 시

👉 항상 최신 데이터 유지

---

3️⃣ 상태 관리 자동화

data
isLoading
error

👉 useState 필요 없음

---

4️⃣ 서버 상태와 UI 상태 분리

• 서버 데이터 → TanStack Query
• UI 상태 → useState

👉 구조가 훨씬 깔끔해짐

---

5️⃣ 확장성 (실무에서 중요)

• pagination
• infinite scroll
• prefetch
• optimistic update

👉 복잡한 기능도 쉽게 구현 가능

---

🔥 핵심 개념: 서버 상태 vs 클라이언트 상태

📌 클라이언트 상태

• UI 상태 (모달, 선택값 등)
• useState로 관리

📌 서버 상태

• API에서 가져온 데이터
• TanStack Query로 관리

👉 이 둘을 분리하는 것이 현대 프론트엔드 핵심 구조

---

5️⃣ 그래서 뭘 써야 할까?

🎯 추천 전략

✅ 기본 구조

TanStack Query + fetch

✅ 복잡한 API

TanStack Query + axios

---

💡 실무 기준 선택 가이드

상황	추천
간단한 프로젝트	fetch
일반적인 React 프로젝트	fetch + TanStack Query
인증/토큰/복잡 API	axios + TanStack Query

---

🔥 최종 정리

• useEffect → 기본적인 데이터 요청 방식 (하지만 확장성 낮음)
• fetch → 가볍고 기본적인 HTTP 요청
• axios → 편의성 좋은 HTTP 라이브러리
• TanStack Query → 서버 데이터 관리의 표준

---

😎 한 줄 결론

요즘 프론트엔드는 “데이터 요청”이 아니라
“서버 상태 관리”를 한다

👉 그리고 그 중심이 바로 TanStack Query이다.