[react/공부] axios 알아보기

axios 알아보기

 

---

       axios란? 

axios는 기존의 fetch와 같은 역할을 하지만, get, put, post, delete, patch 등의 메소드를 활용하여 API의 데이터를 보다 쉽게 변경/삭제할 수 있도록 한다.
가장 큰 차이점은 fetch는 기본적으로 JSON 변환 과정이 필요하지만, axios는 자동으로 변환해준다!!!!

 

 

---

       사용법 

01 설치

npm install axios

 

 

02 사용하기

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

fetchData();

위와 같이 fetch 대신 axios와 몇 가지 메소드를 합쳐서 사용하면 된다.

 

 

03 메소드

메소드	설명
axios.post(url, data)	새로운 데이터를 추가
axios.patch(url, data)	데이터의 일부를 수정
axios.put(url, data)	데이터 전체를 교체
axios.delete(url)	데이터 삭제

이 메소드들은 이전 글에 써둔 tanstack의 useQuery (GET) 과 useMutation (PUT, POST, DELETE)과 함께 사용할 수 있다!

 

 

---

fetch를 사용할때마다 json형식으로 바꿔줘야 해서 좀 헷갈리고 종종 빼먹었엇는데 

쓰지 않아도 된다는 게 진짜 큰 장점인 것 같다.