React에서 AJAX(비동기 웹 애플리케이션)를 구현하기 위해서 JavaScript 내장 객체인 XMLRequest를 사용하거나 다른 HTTP Client를 사용해야 한다.

어떤 HTTP Client 라이브러리를 사용하는게 좋을까?
React와 함께 쓰면 좋은 HTTP Client 라이브러리 중 하나가 Axios이다. (리액트 외에도 굉장히 많이 사용되는 라이브러리이다.)

1. AJAX 란?

Asynchronous JavaScript And XML

👉 JavaScript를 통해서 서버에 데이터를 요청하는 것

AJAX란 JS 라이브러리 중 하나로 비동기 자바스크립트와 xml의 약자이다.
브라우저가 가진 XMLHttpRequest 객체를 이용한 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며 자바스크립트를 사용한 통신, 클라이언트와 서버 간에 XML 데이터를 주고 받는 기술이다.

비동기 방식이란?

• 웹페이지를 reload하지 않아도 데이터를 불러와주는 방식
• Ajax를 통해 서버에 요청을 한 후 멈추는 것이 아닌 계속 프로그램에서 돌아간다!

2. Axios 란?

👉 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리

Axios는 브라우저, Node.js를 위해서 만들어진 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 백엔드와 프론트엔드 간에 통신을 위해 만들어진 AJAX도 더불어 사용하기도 한다.

Axios 특징

• 브라우저를 위해 XMLHttpRequests 생성
• node.js를 위해 http 요청 생성
• Promise(ES6) API를 지원
• 요청 및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• 요청 응답을 JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원

Axios 사용법

0. Axios 설치

yarn add axios

1. 요청 보내기

import axios from "axios";

// axios는 axios.요청타입으로 요청을 보낼 수 있다. 이 방식을 별칭 메서드라고 부른다.
// 예시)
// axios.get(url, config)
// axios.post(url, data, config)

// 어떤 요청을 보낼 지, 별칭 메서드 사용
axios.post('/cat', // 미리 약속한 주소
	{name: 'perl', status: 'cute'}, // 서버가 필요로 하는 데이터를 넘겨주고,
	{headers: { 'Authorization': '내 토큰 보내주기' },} // 누가 요청했는 지 알려준다 (config에서)
).then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2. axios 객체를 생성을 통한 기능별 api 객체 생성

export const authApi = {
    // e.g) 회원 가입
    signup: someData =>
        instance.post("api/user", {
					someData: someData,
					someOtherData: someOtherData
        }),

    // e.g) 유저 프로필 변경
    editUserProfile: (someData) =>
        instance.put(`api/user/${userId}`, { 
					someData: someData,
					someOtherData: someOtherData
 }),