리액트 AXIOS란? axios사용법!

 

 

리액트 AXIOS란?

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다

 

AXIOS 기능

• 브라우저 환경: XMLHttpRequests 요청 생성
• Node.js 환경: http 요청 생성
• Promise API 지원
• 요청/응답 차단(Intercept)
• 요청/응답 데이터 변환
• 취소 요청
• JSON 데이터 자동 변환
• 사이트 간 요청 위조(XSRF) 보호를 위한 클라이언트 사이드 지원

AXIOS 설치방법

vs코드 터미널창 입력!

yarn add axios

 

api처리할 컴포넌트에 import

import axios from 'axios';

 

AXIOS 사용방법

import axios from "axios";

const BASE_URL = process.env.REACT_APP_SERVER;

export const addCommentApi = async (payload) => {
    await axios.post(`${BASE_URL}/commentList`, payload);
  };

컴포넌트에서 통신할 곳을 설정하여 사용하면됩니다. 

크게 post, get, delete,put의 기능을 사용합니다.

 

import axios from "axios";

const BASE_URL = process.env.REACT_APP_SERVER;

export const addCommentApi = async (payload) => {
    await axios.post(`${BASE_URL}/commentList`, payload);
  };

  export const getCommentApi = async (payload) => {
    const response = await axios.get(`${BASE_URL}/commentList?boardId=${payload}`);  
    return response.data;
  };

  export const delCommentApi = async (comment) => {
    await axios.delete(`${BASE_URL}/commentList/${comment.id}`);
  };

  export const editCommentApi = async (edit) => {
    await axios.put(`${BASE_URL}/commentList/${edit.id}`,edit);
  };