[React] Axiox에 관하여

Axios란 ?

JavaScript 및 React Application에서 HTTP 요청을 수행하기 위한 라이브러리 중 하나이다.

Axios를 사용하면 서버와의 통신, 데이터 검색, 업로드 및 다운로드와 같은 다양한 HTTP 작업을 쉽게 수행할 수 있다

 

Axios 설치 방법

Axios를 설치해야 Axios 사용이 가능하다.

터미널에 npm install axios 를 입력하여 설치하자.

npm install axios

 

Axios를 사용한 HTTP GET 요청 

GET 요청 :

Axios를 사용하여 서버에서 데이터를 가져오는 것.

import axios from 'axios';

// GET 요청
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => {
    console.log('데이터:', response.data);
  })
  .catch((error) => {
    console.error('에러:', error);
  });

.get() 메서드 :  URL을 인자로 받음.

• 요청이 성공하면 → .then() 블록에서 응답을 처리
• 요청이 실패하면 → .catch() 블록에서 에러를 처리

 

Axios를 사용한 HTTP POST 요청 

POST요청 : Axios를 사용하여 서버로 데이터를 보내는 것.

import axios from 'axios';

const data = {
  title: '제목',
  body: '내용',
  userId: 1,
};

// POST 요청
axios.post('https://jsonplaceholder.typicode.com/posts', data)
  .then((response) => {
    console.log('응답 데이터:', response.data);
  })
  .catch((error) => {
    console.error('에러:', error);
  });

post() 메서드 : URL과 데이터를 인자로 받음.

• 요청이 성공하면 → .then() 블록에서 응답을 처리
• 요청이 실패하면 → .catch() 블록에서 에러를 처리