React - Axios로 HTTP 요청 보내기

HTTP 요청 메서드

HTTP는 클라이언트가 서버에게 어떤 행동을 요구할지  지정할 수 있는 다양한 요청 메서드를 제공한다.

 

자주 사용하는 HTTP 메서드

 

• GET
  데이터를 조회할 때 사용. URL에 쿼리 파라미터를 포함하여 요청을 보냄.
  예: 사용자 목록 조회, 상품 정보 검색 등
• POST
  새로운 데이터를 생성할 때 사용. 요청 본문(body)에 데이터를 담아 서버에 전송.
  예: 회원 가입, 게시글 작성 등
• PUT
  기존 데이터를 전체적으로 수정할 때 사용. 기존 리소스를 완전히 덮어씀.
  예: 사용자 프로필 전체 업데이트 등
• PATCH
  기존 데이터의 일부만 수정할 때 사용. 필요한 필드만 부분적으로 전송.
  예: 닉네임만 변경, 비밀번호만 수정 등
• DELETE
  데이터를 삭제할 때 사용. 서버에서 해당 리소스를 제거.
  예: 계정 삭제, 댓글 삭제 등

PUT vs PATCH

두 메서드 모두 '수정'을 위한 요청이지만, 수정 범위와 멱등성(idempotency) 측면에서 차이가 있다.

• PUT
  전체 자원을 대체. 수정할 항목이 하나여도 전체 데이터를 함께 전송해야 함.
  → 멱등성 있음 (같은 요청을 여러 번 보내도 결과가 같음)
• PATCH
  일부 필드만 전송. 필요한 부분만 수정하고 나머지는 그대로 유지.
  → 멱등성 없음 (요청 결과가 반복될 때 다를 수 있음)

Axios

axios는 JavaScript에서 HTTP 요청을 쉽게 보낼 수 있도록 도와주는 라이브러리이다.

• Promise 기반
• 간결한 API
• 브라우저와 Node.js 모두에서 사용 가능
• 자동 JSON 변환 지원

npm install axios

 

npm install --save-dev @types/axios

 

이렇게 axios를 설치하고 나면 React에서 axios를 사용할 수 있다.

 

import axios from 'axios';
import React, { useEffect, useState } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

사용자 데이터 가져오기(get)

const fetchUsers = async () => {
  const response = await axios.get("https://jsonplaceholder.typicode.com/users");
  setUsers(response.data);
}

컴포넌트 마운트시 데이터를 불러오게 하기 위해 useEffect와 함께 사용

useEffect(() => {
  fetchUsers();
}, []);

 

사용자 추가하기(POST 사용)

const createUser = async (newUser: User) => {
  const response = await axios.post(
    'https://jsonplaceholder.typicode.com/users',
    newUser
  );
  setUsers([...users, response.data]);
}

사용자 수정(PUT 사용)

const updateUser = async (id: number, updateUser: User) => {
  const response = await axios.put(
    `https://jsonplaceholder.typicode.com/users/${id}`,
    updateUser
  );
  setUsers(users.map(user => user.id === id ? response.data : user));
}

사용자 삭제(DELETE 사용)

const deleteUser = async (id: number) => {
  await axios.delete(`https://jsonplaceholder.typicode.com/users/${id}`);
  setUsers(users.filter(user => user.id !== id));
}