React + API 통신 완전 정복 – fetch와 Axios 비교

React + API 통신 완전 정복 – fetch와 Axios 비교

---

React로 실전 앱을 만들기 시작하면 반드시 마주치는 주제가 있습니다.
바로 API 통신입니다.

데이터를 가져오려면 어떻게 해야 하나요?
fetch와 Axios, 뭐가 다른가요?
로딩 중 처리와 에러 처리는 어떻게 하나요?

이번 글에서는 fetch와 Axios의 차이점,
그리고 실무에서 자주 쓰이는 API 호출 패턴, 로딩/에러 처리법까지
React에서의 API 통신을 완전히 이해할 수 있도록 안내합니다.

---

✅ React에서 API를 호출하는 방법

대표적인 방식은 아래 두 가지입니다:

1. fetch – 브라우저 내장 API
2. axios – 별도 설치하는 외부 라이브러리 (기능 풍부)

---

🔹 fetch 기본 사용법

useEffect(() => {
  fetch("https://api.example.com/data")
    .then((res) => res.json())
    .then((data) => setData(data))
    .catch((err) => setError(err));
}, []);

✅ 브라우저 기본 제공
✅ then 체인 방식으로 결과 처리
⚠️ 에러 핸들링이 다소 불편

---

🔹 axios 기본 사용법

import axios from "axios";

useEffect(() => {
  axios
    .get("https://api.example.com/data")
    .then((res) => setData(res.data))
    .catch((err) => setError(err));
}, []);

✅ 자동으로 JSON 파싱
✅ 요청/응답 인터셉터, 헤더 설정 등 풍부한 기능
✅ 실무에서 더 많이 사용됨

---

🧱 비교 표: fetch vs axios

항목 fetch axios

JSON 자동 파싱	❌ 수동 처리 필요	✅ 자동
요청 취소	❌ AbortController 필요	✅ 기본 지원 (CancelToken)
응답 인터셉터	❌ 직접 구현	✅ 내장 기능
에러 메시지 일관성	❌ 상태코드별 수동 처리	✅ 자동 처리 가능
사용 편의성	기본은 쉬움	고급 기능은 axios 우위

---

🔄 로딩 & 에러 처리 패턴 (공통 구조)

function DataLoader() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get("https://api.example.com/data")
      .then((res) => setData(res.data))
      .catch((err) => setError(err))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return;
  if (error) return


에러 발생: {error.message};

  return {JSON.stringify(data, null, 2)};
}

✅ loading, error, data를 나눠서 관리하는 것이 가장 흔한 패턴입니다.

---

✨ 실전 팁

반응형

• useEffect는 마운트 시 한 번만 실행 ([] 의존성 배열)
• finally를 활용해 로딩 종료 처리
• axios.create()로 공통 API 인스턴스 설정 권장

export const api = axios.create({
  baseURL: "https://api.example.com",
  timeout: 5000,
});

---

🚀 실전 예제: 사용자 목록 가져오기

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    api.get("/users").then((res) => setUsers(res.data));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

---

🧠 오늘의 요약

개념 설명

fetch	브라우저 내장, 기본 기능만 있음
axios	기능이 풍부하고 실무에 적합
상태 분리	data, loading, error를 별도 관리
공통 API 설정	axios.create()로 공통 설정 가능
비동기 처리 위치	useEffect 안에서 실행하는 것이 일반적

---

🧪 실습 과제

1. useEffect를 사용해 외부 API 호출 후 리스트 렌더링 구현
2. 로딩 상태와 에러 메시지를 각각 조건부 렌더링
3. axios.create()로 공통 API 객체를 만들고 적용해보기

---

📌 다음 글 예고

👉 React 컴포넌트 상태 관리 라이브러리 비교 – Context vs Redux vs Zustand

• 언제 어떤 상태 관리 툴을 써야 할까?
• 전역 상태 구조 설계 패턴
• 실제 프로젝트에서의 선택 기준

---

 

React API 호출, React axios 사용법, fetch vs axios, React useEffect API, React 비동기 처리, React 로딩 상태, React 에러 핸들링, React 데이터 요청, React API 통신 구조, axios 실전 패턴