🌐 React와 Vue에서 네트워크 통신은 어떻게 다를까?

프론트엔드 개발에서 API와의 통신은 핵심입니다.

그런데 왜 사람들은 fetch 대신 axios, 혹은 react-query를 쓰는 걸까요?

React와 Vue 프로젝트에서 네트워크 요청을 어떻게 구성할 수 있는지 자세히 살펴보겠습니다.

---

🔍 1. 기본기: Fetch API

fetch는 브라우저에 내장된 표준 HTTP 요청 도구입니다.

ES6 이후 Promise 기반으로 등장했으며, 설치 없이 바로 사용할 수 있습니다.

// 기본 사용 예시
fetch('https://api.example.com/posts')
  .then((res) => {
    if (!res.ok) throw new Error('Network error');
    return res.json();
  })
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

✅ 장점

• 브라우저 내장, 설치 필요 없음
• Promise 및 async/await과 호환
• 기본적인 요청만 있다면 충분

❌ 단점

• 에러 핸들링이 복잡 (status 체크 필요)
• 요청 취소(Cancel) 기능이 없음
• timeout, 인터셉터, 응답 가공 등 고급 기능 부재

💡 주로 사용하는 경우

• 번들 크기를 줄이고 싶을 때
• 요청이 단순하고 로직도 간단할 때

---

🔧 2. 실전에서 더 자주 쓰이는 axios

axios는 fetch의 한계를 보완해주는 라이브러리로, 프론트엔드 개발에서 사실상 표준처럼 사용됩니다.

import axios from 'axios';

try {
  const res = await axios.get('/api/data');
  console.log(res.data);
} catch (e) {
  console.error(e);
}

✅ 장점

• 자동 JSON 변환
• 응답/요청 인터셉터 기능
• timeout, baseURL, headers 설정이 간편
• 요청 취소(CancelToken) 가능

❌ 단점

• 추가 설치 필요
• 번들 사이즈 증가
• 커스터마이징이 많은 경우 학습 필요

💡 이런 상황에서 좋습니다

• 인증 헤더 자동 처리
• 공통 API 인터셉터 로직 처리 필요
• 에러 핸들링이나 요청 취소 등 고급 기능 필요할 때

---

⚛️ 3. React에서는? react-query (현재는 TanStack Query)

단순히 요청만 하는 시대는 끝났습니다. 이제는 요청 결과의 캐싱, 로딩/에러 상태관리, 자동 재요청까지 모두 고려해야 하죠.

이를 위해 React 생태계에서 **react-query**가 널리 사용됩니다.

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

const { data, isLoading, error } = useQuery({
  queryKey: ['posts'],
  queryFn: async () => (await axios.get('/api/posts')).data,
});

✅ 주요 기능

• 요청 결과 자동 캐싱 + 갱신 관리
• 컴포넌트에서 직접 isLoading, error 등 상태 사용 가능
• refetch, pagination, infinite query 등 고급 기능 내장
• mutation 처리도 가능 (useMutation)

❌ 단점

• 학습곡선 존재
• 프로젝트 구조와 설계에 대한 고민이 필요
• 작은 앱에는 오버엔지니어링이 될 수도 있음

💡 추천 상황

• React + CSR 구조에서 API 통신이 많고 복잡할 때
• 상태관리와 API를 통합하고 싶을 때
• SSR/SSG에 맞춰서 hydration과 cache를 관리하고 싶을 때

---

🟢 4. Vue에서는? vue-query 또는 @tanstack/vue-query

Vue 3에서는 Composition API의 등장을 계기로 react-query의 철학이 그대로 이어졌습니다.

Vue 개발자는 vue-query로 같은 패턴을 사용할 수 있습니다.

import { useQuery } from '@tanstack/vue-query';
import axios from 'axios';

const { data, isLoading } = useQuery(['user'], () =>
  axios.get('/api/user').then((res) => res.data)
);

✅ 특징

• React용 query 기능과 거의 동일한 API
• Devtools, caching, prefetch 등 풍부한 기능
• Nuxt SSR 대응도 가능

---

🧩 기술 선택 가이드: 상황별 정리

상황 / 요구사항	추천 기술 (React)	추천 기술 (Vue)
설치 없이 간단한 요청	fetch	fetch
공통 헤더 설정, 요청 취소 등 고급 기능	axios	axios
데이터 캐싱 + 상태 통합 관리	@tanstack/react-query	@tanstack/vue-query
SSR/SSG 대응까지 포함	React Query + Remix	Vue Query + Nuxt

---

📝 결론

• fetch는 가볍고 빠르지만 기능이 제한됨
• axios는 실무에서 가장 많이 쓰이는 안정적인 선택지
• react-query / vue-query는 상태관리까지 통합해주는 현대적인 데이터 패칭 도구

프로젝트 초기에는 간단히 axios로 시작하고,

규모가 커지면 react-query/vue-query로 전환하는 것도 좋은 전략입니다.