[React] Axios란?

안녕하세요
이번에 팀 프로젝트로 인해서 포스팅을 오랜만에 하게되었습니다.
오늘은 이번 팀 프로젝트에서 자주사용한 Axios에 대해서 포스팅 해보겠습니다.

 

우선 리액트는 효율적으로 UI 구현을 위한 라이브러리입니다.

리액트는 따로 내장 클래스가 존재하지 않는데, 이로 인해
React에서 AJAX를 구현하기위해서는 XMLRequest를 사용하거나,
다른 HTTP 클라이언트를 사용해야 합니다.

 

오늘은 수많은 HTTP CLIENT 라이브러리 중 axios 라이브러리에 대해 알아보겠습니다.

 

Axios란?

 

Axios는 브라우저와 Node.js 환경에서 모두 사용할 수 있는 HTTP 클라이언트 라이브러리로,

주로 비동기 요청을 보내기 위해 사용됩니다.

HTTP 요청을 매우 간단하고 직관적으로 작성할 수 있도록 도와주며, 데이터를 JSON 형식으로 자동으로 변환해 줍니다.

Axios의 특징

 

1. Promise 기반: Axios는 Promise API를 지원하여 비동기 처리 방식을 더 쉽게 구현할 수 있습니다.

2. JSON 자동 변환: 서버로부터 받은 데이터를 JSON 형식으로 자동 변환해줍니다.

3. 요청과 응답 인터셉터: 요청을 보내기 전이나 응답을 받은 후에 인터셉터를 설정하여 요청이나 응답을 조작할 수 있습니다.

4. Node.js 환경 지원: 브라우저뿐만 아니라 Node.js 환경에서도 사용 가능합니다.

5. 보안 기능: CSRF 보호, 인증 헤더 설정 등 보안 관련 기능도 제공합니다.

6. XSRF 보호: XSRF 쿠키를 자동으로 처리해줍니다.

7. 타임아웃 설정: 요청에 대한 타임아웃을 설정할 수 있어 네트워크 오류에 유연하게 대응할 수 있습니다.

 

Axios 설치 및 사용법

1. 설치

npm install axios

2. 사용법

간단한 GET 요청

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error("Error fetching data:", error);
  });

 

POST 예제

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Axios Post',
    body: 'This is a post using Axios',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error("Error posting data:", error);
  });

 

Delete 예제

import axios from 'axios';

// DELETE 요청으로 데이터 삭제
axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log('Delete Response:', response.data);
  })
  .catch(error => {
    console.error('Error deleting data:', error);
  });

Put 예제

import axios from 'axios';

// PUT 요청으로 데이터 수정
axios.put('https://jsonplaceholder.typicode.com/posts/1', {
    title: 'Updated Title',
    body: 'Updated body content',
    userId: 1
  })
  .then(response => {
    console.log('Put Response:', response.data);
  })
  .catch(error => {
    console.error('Error updating data:', error);
  });

 

이제 Node js를 통해 받는 예제를 적어보겠습니다.

import express from 'express';

const app = express();
const PORT = 3000;

// JSON 형식의 요청 데이터를 받기 위한 미들웨어 설정
app.use(express.json());

app.post('/posts', (req, res) => {
  const { title, body, userId } = req.body;

  // 받은 데이터를 콘솔에 출력
  console.log('Received POST request:');
  console.log('Title:', title);
  console.log('Body:', body);
  console.log('UserId:', userId);

  // 응답으로 받은 데이터를 다시 클라이언트로 전송
  res.status(201).json({
    message: 'Post request received successfully',
    data: {
      title,
      body,
      userId
    }
  });
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

미숙하지만 읽어주셔서 감사합니다.

다음에뵐게용 ~