[React] 노마드코더 영화 웹 서비스 만들기(2) - Fetch API

 Fetching Movies from API

 

 

 

Axios

일반적으로 자바스크립트에서 data를 fetch하는 방식은 fetch()를 사용하는 것이지만

여기선 Axios를 사용한다.

 

 

 

 

npm install axios 

 

Axios를 설치한다.

 

 

 

API 가져오기

 

https://yts-proxy.now.sh/list_movies.json

 

API를 가져올 YTS라는 사이트는 불법 토렌트 사이트라 도메인을 수시로 바꾸기 때문에 API URL 이 계속 변경된다.

그래서 니콜라스가 깃허브에 올린 YTS 사이트를 추적하는 주소를 사용한다.

 

 

JSONView 라는 크롬 확장프로그램을 설치해서 보면 보기 좋게 바꿔준다.

 

 

 

import React from "react";
import axios from "axios";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: []
  };
  componentDidMount() {
   const movies = axios.get("https://yts-proxy.now.sh/list_movies.json");
  }
  render() {
    const { isLoading } = this.state;
    return <div>{isLoading ? "Loading..." : "Ready"}</div>;
  }
}

export default App;

 

 

axios를 import하고 componentDidMount에 axios.get(URL)을 추가한다.

 

 

개발자 도구로 네트워크창을 열어보면 list_movies.json을 요청하고 있는 것이 보인다.

이제 그 데이터를 가져와야 한다.

 

axios는 느리기 때문에, componentDidMount 함수가 끝날 때 까지 시간이 걸릴 수 있다는 것을 알려줘야 한다.

따라서 완료가 될 때까지 기다리기 위한 비동기 처리 문법 async/await를 사용한다.

 

getMovies = async() => {
  const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json");
}
componentDidMount() {
  this.getMovies();
}

 

async : 기다려야 함

await: 무엇을 기다릴지

 

 

 

 

=> 어플리케이션이 mount된 후, getMovies 함수를 호출한다.

getMovies 함수에서는 axios로 url을 받아오는데, 완료되기까지 시간이 걸리기 때문에 async/ await로 기다린다.