React 기초 (5) : fetch / axios

Axios 공식 문서 정리

 

 

이번에 Axios를 아예 통으로 정리했으니 다음 포스트를 보는게 더 빠르고 자세하다. 아래는 어디까지나 입문자를 위한 설명입니다.

---

 

 

먼저, fetch 대신 axios를 쓰는 건 코딩에 들어가는 노력을 줄여주기 때문에 종종 사용하긴 하지만 가끔 오류가 발생하여 곤혹을 치룰 때가 있다. 그러니 fetch를 사용할 줄 알아야 하며 그 이후에 편의성을 위해 axios를 사용하도록하자.

 

fetch와 axios는 프론트와 백이 소통하는 방식이다. get을 통해 백단에서 정보를 가져올 수도 있고 post를 통해 백으로 정보를 보낼 수도 있다. 우리가 직접 코딩하지 않은 백엔드인 외부 API에서 정보를 받아오는 방식 또한 fetch와 axios이다. 

 

axios 설치를 해주자.

npm install axios
//설치 후
import axios from "axios"

 

Cannot read property 'match' of undefined 

오류가 종종 발생하는데 package-json.lock을 삭제후 다시 설치하면 될 것이다.

 

axios를 활용해보자. YTS API를 통해 영화 정보를 가져올 것이다. 가장 간단한 것은 axios.get("URL")을 통해 가져오는 것이다.

  async componentWillMount() {
    const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json");
    this.setState({ movies: movies.data.data.movies, isLoading: false });

 

axios를 좀 더 응용해보자.

 

https://api.themoviedb.org/3/tv/popular?api_key=12345&language=en-US&page=1

https://api.themoviedb.org/3/movies/on-air?api_key=12345&language=en-US&page=1 

와 같이 비슷한 경로의 여러 API를 이용해야 한다고 하자.

 

먼저 URL을 분석해보면 앞 부분은 공통적이고 ? 이후는 쿼리이다.

 

쿼리(?) 이후 부분은 params로 넘겨주고 공통된 부분인 https://api.themoviedb.org/3/은 baseURL로 설정해주자.  

이후 api.get("[baseURL 이후 추가될 주소]", {params: api_key: "12345", language: "en-US}를 통해 정보를 가져오자.

여기서 주의할 점은 /tv/popular가 아니라 tv/popular로 넣어야 한다는 것이다. 앞에 /가 붙으면 절대 경로로 인식해서 baseURL 뒤에 붙이지 않는다.

import axios from "axios";

const Params = {
  api_key: "1234",
  language: "en-US"
};

const DetailParams = {
  api_key: "1234",
  language: "en-US",
  append_to_response: "videos"
};

const api = axios.create({
  baseURL: "https://api.themoviedb.org/3/"
});

export const tvApi = {
  topRated: () => api.get("tv/top_rated", { params: Params }),
  popular: () => api.get("tv/popular", { params: Params }),
  airingToday: () => api.get("/tv/airing_today", { params: Params }),
  tvDetail: id => api.get(`tv/${id}`, { params: DetailParams }),
  search: term =>
    api.get("search/tv", {
      params: {
        api_key: "1234",
        language: "en-US",
        query: encodeURIComponent(term)
      }
    })
};

export const movieApi = {
  nowPlaying: () => api.get("movie/now_playing", { params: Params }),
  upComing: () => api.get("movie/upcoming", { params: Params }),
  popular: () => api.get("movie/popular", { params: Params }),
  movieDetail: id => api.get(`movie/${id}`, { params: DetailParams }),
  search: term =>
    api.get("search/tv", {
      params: {
        api_key: "1234",
        language: "en-US",
        query: encodeURIComponent(term)
      }
    })
};