[React] Axios란? (+ Fetch API)

 

 

 

리액트는 효율적인 UI 구현을 위한 라이브러리이다. HTTP Client(HTTP 상에서 커뮤니케이션을 하는 자바 기반 컴포넌트)를 내장하고 있는 Angular와는 다르게 리액트는 따로 내장 클래스가 존재하지 않는다.

 

따라서 리액트에서 AJAX를 구현하려면 Javascript 내장객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야 한다.

 

 

그렇다면 어떤 HTTP Client 라이브러리를 사용하는게 좋을까? 리액트와 함께 쓰면 좋은 HTTP Client 라이브러리가 많지만 여기에선 리액트에서 많이 쓰이는 것 중에 하나인 Fetch API를 비교하며 axios 라이브러리를 알아볼 것이다.

 

1. AJAX (Asynchronous Javascript And XML)
Javascript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다.
브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.
정리하자면, 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.

2. 비동기 방식이란?
비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다.

3. 비동기 방식의 장점
페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트, 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있는 장점이 있다.

 

 

 

 

 

1. Axios란?

---

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

비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다

 

 

1-2. Axios 장단점

---

장점

• response timeout (fetch에는 없는 기능) 처리 방법이 존재
• Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
• 브라우저 호환성이 뛰어남

 

단점

• 사용을 위해 모듈 설치 필요 (npm install axios)

 

 

 

1-3. Axios 특징

---

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

 

 

1-4. Axios 사용법

---

1. Axios 다운로드

yarn add axios

npm i axios

//자신이 진행중인 프로젝트 상위에 import 시켜주기
import axios from 'axios'

 

 

2. HTTP Methods

클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알리는 수단이다.

이 Method중 Axios 통신하면서 가장 많이 사용되는 메소드는 다음과 같다.

 

1) GET

GET : 입력한 url에 존재하는 자원에 요청을 한다.

 

 

문법

axios.get(url,[,config])

 

 

Q) Get이 데이터를 받아오는 것이라고 했는데, 저는 로그인을 구현할때 GET을 사용했는데요?

GET으로 로그인을 구현했을때 웹 사이트 주소창의 형태를 잘 보면 이러한 형태가 나온다.

www.server.com/login?id=Hnk&pw=1234  // 실제로 없는 사이트이다, 이해를 돕기 위해서 추가했다.

웹 사이트 뒤에 쿼리스트링이 붙여진 것을 확인할 수 있다.

(하지만 로그인 구현 시 GET 요청을 사용하는 것은 보안상 취약하기 때문에 일반적으로 POST 요청을 사용한다. 아래 POST 요청에서 다시 설명한다.)

 

✅ GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이다.
주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태등을 바꿀 수 없다.

 

 

예제 코드

// 가상으로 보여주는 코드와 response 형태이다.
import axios from 'axios';

axios.get('https://localgost:3000/lisa/user')
  .then((Response)=>{console.log(Response.data)})
  .catch((Error)=>{console.log(Error)})

[
  { id: 1, pw: '1234', name: 'james' },
  { id: 2, pw: '1234', name: 'lisa' },
  { id: 3, pw: '1234', name: 'sam' }
]

응답은 json 형태로 넘어온다.

 

 

 

 

2) POST

POST : 새로운 리소스를 생성(create)할 때 사용한다.

 

문법

axios.post("url주소",{
  data객체
    },[,config])

POST 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.

 

 

Q) Post는 새로운 리소스를 생성할 때 사용되는데 그러면 언제 POST를 사용하나요?

 

✅ 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용한다.

Post를 사용하면 주소창에 쿼리스트링이 남지 않기때문에 GET보다 안전하다.

 

 

예제 코드

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

 

 

 

3) Delete

DELETE: REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.

 

문법

axios.delete(url,[,config]);

✅ Delete메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.

 

 

예제 코드

axios.delete("/thisisExample/list/30").then(function(response){
    console.log(response);
      }).catch(function(ex){
      throw new Error(ex)
}

 

 

 

 

4) PUT

PUT: REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용된다.

 

 

문법

axios.put(url[, data[, config]])

✅ PUT메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.

 

 

 

 

 

*Axios에 대한 더 자세한 내용은 아래 링크를 참고하면 된다.

https://axios-http.com/kr/docs/intro

 

 

 

 

 

2. Fetch API란?

---

ES6부터 들어온 JavaScript 내장 라이브러리이다.

Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터를 다루기 쉽고 내장 라이브러리라는 장점으로 상당히 편리하다.

 

 

 

 

 

2-1. Fetch API 장단점

---

 

1. 장점

• 자바스크립트의 내장 라이브러리 이므로 별도로 import 할 필요가 없음
• Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리
• 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능
  
  

2. 단점

• 지원하지 않는 브라우저가 존재 (IE11...)
• 네트워크 에러 발생 시 response timeout이 없어 기다려야 함
• JSON으로 변환해주는 과정 필요
  
• 상대적으로 axios에 비해 기능이 부족

 

 

 

 

2-2. Axios VS Fetch API

---

지금까지 일반적으로 자바스크립트에서 API를 연동하기 위해서 보통 Fetch API를 사용하곤 했다.

리액트도 자바스크립트 내장(built-in) 라이브러리중 하나인 Fetch API라는 훌륭한 API 연동 모듈을 사용한다.

하지만 Fetch API는 자바스크립트의 built-in 라이브러리라는 특성 때문인지 많은 사람들이 리액트에서 axios를 사용하는 것을 선호한다.

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

 

 

 

 

그렇다면 많은 사람들이 왜 Fetch API말고 axios를 더 선호할까?

서로 각 코드를 비교해 보기로 하자.

 

Fetch API

//fetch
const url ='http://localhost3000/test`
const option ={
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({
  	name:'lisa',
    	age:20
  })

  fetch(url,options)
  	.then(response => console.log(response))

 

 

axios

//axios
const option ={
  url ='http://localhost3000/test`
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  data:{
  	name:'lisa',
    	age:20
  }

  axios(options)
  	.then(response => console.log(response))

 

 

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

위 코드에서 차이점을 찾아보자.

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

 

이처럼 axios는 HTTP 통신의 요구사항을 컴팩트한 패키지로써 사용하기 쉽게 설계 되었다.

 

 

 

 

 

참고

https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API#1-get

https://cocoon1787.tistory.com/756