[REACT] fatch, axios 사용법

React에서 데이터를 가져오는(fetch) 방법은 대표적으로 두 가지예요:
1️⃣ 기본 내장 fetch() API
2️⃣ 외부 라이브러리 axios

두 방법 모두 자주 쓰이고, 성격이 다르기 때문에 프로젝트 상황에 따라 선택합니다. 아래에 종류별 예제 + 설명을 정리했어요 👇

---

🌐 1. fetch() 기본 사용법

✅ 기본 문법 (GET 요청):

import { useEffect, useState } from "react";

export default function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts") // API 주소
      .then((res) => res.json())                       // 응답을 JSON으로 변환
      .then((data) => setPosts(data))                 // state에 저장
      .catch((err) => console.error("에러:", err));   // 에러 처리
  }, []);

  return (
    <div>
      <h2>📦 fetch 예제</h2>
      <ul>
        {posts.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </div>
  );
}

📌 설명:

• fetch()는 브라우저 내장 함수 → 별도 설치 필요 없음
• .then() 체인을 사용하거나 async/await도 가능
• 응답을 JSON으로 변환하려면 .json()을 꼭 호출해야 함
• 에러 처리가 try/catch 대신 .catch()에서 이뤄짐

---

✅ POST 요청 (데이터 전송):

async function addPost() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ title: "새 글", body: "내용", userId: 1 }),
  });

  const result = await response.json();
  console.log("✅ 저장 결과:", result);
}

📌 포인트:

• method 지정 필요
• headers로 JSON 전송 명시
• body는 반드시 문자열(JSON.stringify)

---

📡 2. axios 사용법

Axios는 Promise 기반 HTTP 클라이언트로, fetch보다 기능이 많고 문법이 간결합니다.

📦 설치:

npm install axios

✅ 기본 GET 요청:

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

export default function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((res) => setPosts(res.data))       // JSON 변환 불필요
      .catch((err) => console.error("에러:", err));
  }, []);

  return (
    <div>
      <h2>📦 axios 예제</h2>
      <ul>
        {posts.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </div>
  );
}

📌 fetch와 비교 포인트:

• res.json() 필요 없음 → res.data 바로 사용
• 자동으로 JSON 변환 처리
• 에러가 catch로 잘 전달됨
• 요청/응답 인터셉터, 기본 URL, 헤더 설정 등 고급 기능 많음

---

✅ POST 요청 (axios):

async function addPost() {
  try {
    const res = await axios.post("https://jsonplaceholder.typicode.com/posts", {
      title: "새 글",
      body: "내용",
      userId: 1,
    });
    console.log("✅ 저장 결과:", res.data);
  } catch (error) {
    console.error("에러 발생:", error);
  }
}

📊 fetch vs axios 비교표

항목fetchaxios

설치 필요	❌ 없음 (기본 내장)	✅ 필요 (npm install axios)
문법 간결성	👎 다소 복잡 (json 변환 필요)	👍 직관적 (자동 JSON)
에러 처리	일부 제한 있음	에러 정보 상세
요청/응답 인터셉터	❌ 없음	✅ 있음
기본 URL/헤더 설정	❌ 없음	✅ 있음
브라우저 호환성	✅ 최신 브라우저	✅
취소 토큰 / 타임아웃	❌ 직접 구현 필요	✅ 기본 제공

 

🧭 HTTP 메서드별 개념 & 용도 정리

메서드역할주 용도특징예시 상황

GET	📦 데이터 “조회”	서버에서 데이터 가져오기	Body 없음, URL로 요청	게시글 목록 보기, 상세보기
POST	✏️ 데이터 “생성”	새 데이터 등록	Body에 새 데이터 포함	회원가입, 새 글 작성
PUT	🛠 데이터 “전체 수정”	기존 데이터를 “완전히” 교체	Body에 전체 객체 포함	게시글 전체 수정
PATCH	🪛 데이터 “부분 수정”	일부 필드만 수정	Body에 수정 필드만 포함	닉네임만 변경
DELETE	🗑 데이터 “삭제”	서버의 리소스 삭제	Body 거의 없음	회원 탈퇴, 게시글 삭제