20201006 TIL React - Axios

axios.create 사용하기

React 는 framework 가 아닌 library로 data와 관련된 기능은 주로 3rd Party Library, 즉 외부 라이브러리에서 기능을 많이 빌려 사용한다.
그 중 api를 관리하는데에 axios를 사용할 수 있는데, 오늘은 axios를 사용해 api를 받아오는 연습을 했다.

Axios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from the browser that also supports the ES6 Promise API.

사용 api : unsplash에서 제공해주는 무료 app api

하루 50번의 데이터 요청이 무료로 제공되고있는 api를 사용할 수 있고, 그 중에서도 search image 항목에서 정보를 수집했다.

get방식을 사용해 api 요청을 보냈다.

// App.js component 내부

axios.get("https://api.unsplash.com/search/photos",{
  headers: {
    Authorization: "Client-ID dfBnF1CemXVjqTjeZwXJSOM3IKyG9AYk4pe8elcV0Sg"},
  params: {query: term}
});

위와 같은 코드를 작성했고, 이후 axios.create를 이용해 URL부분과 headers 부분을 분리하기로 했다.

// api / unsplash.js
import axios from "axios";

export default axios.create({
  baseURL: "https://api.unsplash.com",
  headers: {
    Authorization: "Client-ID dfBnF1CemXVjqTjeZwXJSOM3IKyG9AYk4pe8elcV0Sg",
  },
});

create로 api 요청을 분리할 경우, 같은 부분을 계속해서 작성함으로써 늘어나는 용량을 줄일수 있고, 또 여러 api를 사용할 경우에 기본적인 url, authorization, key 등을 효율적으로 관리가 가능하다.
이를 이용해 컴포넌트를 수정하면

import unsplash from "../api/unsplash";

unsplash.get("/search/photos", {
   params: { query: term },
});

관련된 코드만 뽑아왔기 때문에 이상해보일 수 있겠지만 확실히 좀 더 어디로 보내는 요청인지 좀 더 간결하게 확인이 가능해졌다.