[React] HTTP API 연동을 위한 Axios vs Fetch API

 

 

 

리액트는 효율적인 UI 구현을 위한 라이브러리다.

이는 따로 내장 클래스가 존재하지 않기에, AJAX 를 구현하려면

자바스크립트 내장객체인 XMLRequest 를 사용하거나, 다른 HTTP Client 를 사용해야 한다.

 

리액트와 함께 쓰면 좋은 HTTP Client 라이브러리 중에서

노마드 코더 강의를 수강하면서 알게 된 Fetch API 와 axios 에 대해서

정리해보려 한다 💫

 

 

---

 

AJAX

Asynchronous Javascript And XML

자바스크립의 라이브러리 중 하나

 

자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능으로,

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해 전체 페이지를 새로 고치지 않고도

페이지의 일부만을 위한 데이터를 로드하는 기법이다.

 

간단하게, 자바스크립트를 통해 서버에 데이터를 요청하는 것이다.

 

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

 

 

 

---

 

 

Axios

Promise based HTTP client for the browser and node.js

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

return 타입이 promise 객체로 해주기 떄문에 response 데이터를 다루기에 쉽다.

이러한 Axios 의 장단점은 아래와 같다.

 

📌 장점

• response timeout 처리 방법이 있음 (fetch 에는 존재하지 않는 기능)
• promise 기반으로 다루기가 쉬움
• 크로스 브라우징을 많이 고려했기에, 브라우저 호환성이 뛰어남

 

📌 단점

• 모듈 설치를 따로 해야 함

 

 

Axois 설치와 사용법에 대해서도 간단하게 알아보자.

 

1. Axios 설치

$ npm install axios

 

2. Axios 사용

import React from 'react';
import axios from 'axios';

class Home extends React.component {
	state = {
    	isLoading : true, movies: []
    };
    
    getMovies = async () => {
    	const{ data : { 
        	data : { movies } 
          } } = await axios.get("movie site api url");
       	this.setState( { movies, isLoading: false });
    }
}

 

위 예제는 영화 사이트에서 영화 정보를 받아오는 예제이다.

GET 방식을 통해 지정한 API 에서 정보를 받아오고,

해당 작업을 완료하면 isLoading 객체를 false 로 해줌으로써

로딩 화면을 멈추고 영화 리스트를 화면에 보여준다.

 

GET 방식에 대해서만 작성해두었지만, 다른 HTTP Methods 사용 예제도 원한다면

📜해당 블로그 의 내용을 참고하자.

 

 

 

---

 

 

Fetch

ES6부터 자바스크립트의 내장 라이브러리로 들어와,

promise 기반으로 만들어졌기에 Axios 와 마찬가지로 데이터를 다루는데 어렵지 않다.

내장 라이브러리라는 장점으로 상당히 편리하며, 코드도 간단하다.

이러한 Fetch 의 장단점은 아래와 같다.

 

📌 장점

• 내장 라이브러리이기에 별도의 import 를 해줄 필요가 없음
• promise 기반으로 다루기 쉬움
• 내장 라이브러리이기에 사용하는 프레임워크가 안정적이지 않을 때 사용하기 좋음

 

📌 단점

• 브라우저 호환성이 상대적으로 떨어짐
• 부족한 기능

 

 

현재 진행하고 있는 프로젝트가 RN 인데,

RN 같은 경우에는 대부분 Fetch 사용을 추천하더라 . .

아무래도 아직 안정화된 프레임워크가 아니기 때문이 가장 큰 이유인 것 같다.

 

하지만 둘다 사용해본 🎨 개발자의 후기 (?) 를 읽어보니,

Axios 의 크로스 브라우징 최적화, interceptor를 통한 에러 핸들링,

기본 인스턴스 설정을 통한 전역적인 세팅 관리 등 다양한 장점으로

Axios 를 추천한다고도 하시더라 . . !

 

상황에 맞게 프로젝트에 잘 적용시켜보자 !

 

 

 

 

 

© 참고

AJAX 란 무엇인가?

리액트 axios 란?

[개발상식] Ajax 와 Axios 그리고 fetch

[개발상식] Ajax와 Axios 그리고 fetch