[React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip

Axios 로고

Axios란? 

Axios는 JavaScript에서 HTTP 요청을 보내는 데 가장 많이 사용되는 라이브러리이다.

주로 웹 애플리케이션과 API를 통신하는 데 사용되는데, Axios는 HTTP 요청을 보내고 해당 작업이 완료되면 Promise 객체를 반환하는 Promise 기반 API를 제공하여 비동기 요청을 처리하고 응답을 관리할 수 있습니다. 

 

 쉽게 말해 서버에 올린 Database 정보(Rest Api)를 프론트에서 사용할 수 있도록 읽어오는 과정이다.

 

Axios의 장점

1. 사용하기 쉽고 간결한 API: Axios는 간단하고 직관적인 API 사용 기능함수를 제공하여 HTTP 요청을 보내고 응답을 처리할 수 있다. 
2. 여러 플랫폼에서 동작: Axios는 브라우저 및 Node.js와 같은 다양한 환경에서 동작한다. 그렇기에 웹 및 서버 애플리케이션 모두에서 일관된 방식으로 HTTP 요청을 처리할 수 있다.
3. 강력한 기능: Axios는 요청과 응답의 중단, 인터셉터(interceptors)를 사용한 요청 및 응답 변형, 데이터 변환, 오류 처리 등을 지원한다. 또한 파일 업로드 및 다운로드와 같은 파일 관련 작업도 수행할 수 있다.

Axios 사용 예시 코드

기본적인 CRUD 기능과 함께 header에 토큰 전송 기능을 알아보도록 하겠다.

 

post() - Create 기능

// 추가 데이터
const data = {
  name: 'Pard',
  age: 1
};

// Axios를 사용하여 'https://api.example.com/users' POST를 통해 data 추가 요청
axios.post('https://api.example.com/users', data)
  .then(response => {
    console.log(response.data); // 성공적인 응답의 데이터를 콘솔에 출력
  })
  .catch(error => {
    console.error(error); // 요청 실패 시 에러를 콘솔에 출력
  });

get() - Read 기능

const [shareNotices, setShareNotices] = useState([]);

// Axios를 사용하여 'https://api.example.com/users' GET 요청을 통해 data 가져오기
axios.get('https://api.example.com/users')
  .then(response => {
    console.log(response.data); // 응답 데이터를 콘솔에 출력
    setShareNotices(response.data); // 응답 데이터를 shareNotices 상태 변수에 설정
  })
  .catch(error => {
    console.error(error); // 요청 실패 시 에러를 콘솔에 출력
  });

put() - Update 기능

// 업데이트 데이터
const data = {
  name: 'John',
  age: 30
};

// Axios를 사용하여 'https://api.example.com/users/1' 에 대한 정보를 put을 통해 data 수정 요청
axios.put('https://api.example.com/users/1', data)
  .then(response => {
    console.log(response.data); // 성공적인 응답의 데이터를 콘솔에 출력
  })
  .catch(error => {
    console.error(error); // 요청 실패 시 에러를 콘솔에 출력
  });

delete() - Delete 기능

// Axios를 사용하여 'https://api.example.com/users/1' DELETE를 통해 data 삭제 요청
axios.delete('https://api.example.com/users/1')
  .then(response => {
    console.log(response.data); // 성공적인 응답의 데이터를 콘솔에 출력
  })
  .catch(error => {
    console.error(error); // 요청 실패 시 에러를 콘솔에 출력
  });

 

header에 토큰 정보함께 하고, API 함수 파일 만들어서 코드 관리하기하는 방법에 대해 다음 포스트에 넣도록 하겠다.

2023.07.18 - [코딩/React] - [React] Axios - Header에 토큰 전송 및 코드 관리 Tip

다들 화이팅 :)