[React axios] 리액트 axios란? :: HTTP-API 연동을 위한 모듈 (axios vs Fetch API)

우리가 일반적인 자바스크립트에서 API를 연동하기 위해서는 보통 fetch-Api를 사용하곤 했다.

 

리액트 또한 자바스크립트 built-in 라이브러리중 하나인 fetch-api또한 훌륭한 api 연동 모듈이다.

 

하지만 fetch-api는 자바스크립트의 built-in 라이브러리라는 특성 덕분인지 많은 사람들은 React에서 axios를 사용하는 것을 선호한다.

React보다 높은 axios의 npm 다운로드 통계

리액트에서 fetch api를 사용하면 안되는 것은 아니지만 왜 사람들은 axios를 선호할까?

 

서로 비교를 하는 코드를 봐보자.

axios vs Fetch-api

// fetch

const url = 'http://localhost/test.htm';
const options = {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  body: JSON.stringify({
    a: 10,
    b: 20
  })
};

fetch(url, options)
  .then(response => {
    console.log(response.status);
  });

 ------------ ------------ ------------ ------------ ------------ ------------ ------------

// axios

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};

axios(options)
  .then(response => {
    console.log(response.status);
  });

동일한 기능을 수행하는 코드고 간단한 코드이다.

 

여기서 보면 차이점을 한 번 찾아보자.

• fetch()는 body 프로퍼티를 사용하고, axios는 body 프로퍼티를 사용한다.
• fetch의 body 부분은 stringify() 되어진다.
• fetch에서는 url이 fetch()함수의 인자로 들어간다.
• axios에서 url이 option 객체로 들어간다.

여기서는 차이점을 찾을 수 없으니 좀 더 다양한 이유에서의 차이점을 찾아보자.

	Axios	Fetch
호환성	IE11과 같이 오래된 모든 브라우저에서 지원 가능	Chrome 42+, Firefox 39+등과 같은 한정된 브라우저에서만 가능
Response TImeOut	간단	복잡
Automatic JSON data transform	가능	불가능

결론

Axios는 대부분 HTTP 통신의 요구사항을 컴팩트한 패키지로써 사용하기 쉽게 설계되었다.

 

위에서 보여줬듯 브라우저에서 제공하는 fetch()메서드를 이용해서 axios를 완벽히 재현할 수 있지만, 그 시간을 다른 곳에 투자하는 것이 좋다고들 한다.

그럼 이제 왜 우리가 axios를 배워야 하는지에 대한 간단한 설명이 되었을 것이라 생각하고 진짜 Axios에 대해서 알아보도록 하자.

Axios

Axios란 Promise 기반의 HTTP client라고 axios 공식 github에 기재되어있다.

또한 axios는 Promise 기반이고 우리에게 async/await 코드를 매우 쉽게 구현할 수 있게 해준다.

 

이런 axios를 사용하면 우리에게 좀 다양한 장점들을 제공해준다.

axios의 장점

• 오래된 브라우저에서도 지원한다.
• 요정을 중단할 수 있다.
• response timeout을 쉽게 지정할 수 있다.
• CSRF 보호 기능이 내장되어있다.
• upload progress를 지원한다.
• JSON을 자동으로 변환해준다.

이 외에도 다양한 이유가 있지만 큰 특징은 이렇다.

axios가 없었더라면..

다음시간부터 제대로 배워볼 것이지만 지금 간단하게 어떻게 axios가 생겼는지 알아보자.

 

일단 axios를 사용하지 않는다고 가정하면 우리는 XMLHttpRequest()를 사용해서 open과 onreadystatechange등을 사용해서 복잡한 작업들을 해줘야 한다.

let xhr = new XMLHttpRequest();
xhr.open('GET', 'url', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
      (perform some code);
  } else {
    (handle error)
  }
};
xhr.send();

우리가 axios를 모르고 통신을 한다면onreadystatechange는 무엇이고, asyncronose하게 작업을 할 때는 또 다른 고민들을 해야한다.

 

하지만 이런 불편함을 axios에서는 마법처럼 간단하게 수행해준다.

axios.get('url')
  .then((response) => {
    console.log(response);
  })
  .catch((response) => {
    console.log(error);
  });

또 post 코드를 비교해보자.

axios.post( 'url',
  {
    contact: 'James',
    email: 'james.h@gmail.com'
  },
  {
    headers:{
      'Content-type': 'application/json',
      'Accept': 'application/json'
    }
  }
)
  .then((response) => {
    console.log(response.data);
  })
  .catch((response) => {
    console.log('Error!)
  });

아까 get 보다는 복잡하지만 이를 XMLHttpRequest()로 바꿔보자. 아주 복장터진다.

let xhr = new XMLHttpRequest();

xhr.open('POST', 'url', true);

xhr.setRequestHeader('Content-type', 'application/json');
xhr.setRequestHeader('Accept', 'application/json');
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.response);
  } else {
    (handle error)
  }
};
xhr.send();

이제 나는 더 이상 axios 없는 세상을 설명하고싶지 않아졌다.

 

---

충분히 이정도면 왜 우리가 axios를 배워야 하고 사용해야하는지에 대한 궁금증과 목적성이 해결되었다고 생각한다.

 

이제 다음 시간 부터는 axios를 사용하는 방법에 대해서 알아볼 것이고, 실제로 공공 api를 통해 axios를 실전에서 사용하는 방법에 대해서 알아보자.