fetch와 axios의 장단점

react로 작업을 할때면 습관처럼 axios를 함께 설치하곤 했다. 

axios를 쓰는 나만의 이유는 없었지만 굳이 생각해보자면 fetch보다 왠지 좀 더 간단한 코드인 것 같아서?

 

그럼 axios는 fetch와 뭐가 다를까? 왜 굳이 설치하여 사용할까?

 

fetch

fetch는 ES6부터 들어온 JavaScript 내장 라이브러리로 따로 설치하지 않고 사용할 수 있다. Promise기반으로 만들어졌기 때문에 axios처럼 다루기가 쉽다.

class Youtube {
  constructor(key) {
    this.key = key;
    this.getRequestOptions = {
      method: "GET",
      redirect: "follow",
    };
  }

  async mostPopular() {
    const response = await fetch(
      `https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=${this.key}`,
      this.getRequestOptions
    );
    const result = await response.json();
    return result.items;
  }
}

export default Youtube;

예제코드는 드림코딩의 유튜브클론코딩 작업을 하며 가져온것이다.   fetch( ) 괄호사이에 요청할 링크와 query를 넣는다.

받아온 데이터는 별도로 json처리를 해주고 있다. 

 

fetch의 장점은 

-  자바스크립트 내장 라이브러리 이기 때문에 따로 설치하거나 import를 할 필요가 없고

-  axios와 마찬가지로 promise기반이기 때문에 데이터를 다루기 편리하다.

 

fetch의 단점은

- JSON으로 변환해주는 과정이 필요하고

- fetch로 할 경우, params를 url로 해야하기 때문에 가독성이 떨어질 수 있다.

 

 

axios

axios는 Promise API를 활용하는 HTTP통신 라이브러리다. 비동기로 HTTP통신을 할 수 있으며 return을 promise객체로 해주기 때문에 response데이터를 다루기 쉽다.

import axios from "axios";

class Youtube {
  constructor(key) {
    this.youtube = axios.create({
      baseURL: "https://www.googleapis.com/youtube/v3",
      params: { key: key },
    });
  }

  async mostPopular() {
    const response = await this.youtube.get("videos", {
      params: {
        part: "snippet",
        chart: "mostPopular",
        maxResults: 25,
      },
    });
    return response.data.items;

  }
id: item.id.videoId }));
  }
}

export default Youtube;

 

axios의 장점은 

- promise기반으로 만들어졌기 때문에 데이터 다루기가 편리하고

- json으로 변환하지 않아도 라이브러리 자체에서 json으로 변환해주기때문에 편리하다.

- 또, axios는 이전 버전과도 호환이 된다.

 

axios의 단점은

- 사용하기 위해선 모듈 설치가 필요하다.

 

 

느낀점

라이브러리를 쓸 때 왜 쓰는지에 대해 나의 이유를 말 할 수 있어야 할 것 같다.

이유가 타당할때 라이브러리를 써야겠다!!

 

 

출처 or 참고 : 드림코딩