#4.0 Fetching Movies from API

일반적으로 사람들이 JS에서 data를 fetch하는 방법은 fetch를 사용한는 것이다. 

coponentDidMount(){

    fetch()

}

하는 방법도 있지만 니콜라스가 선호하는 방법은 Axios라고 부르는 것이다. axios 는 마치 fetch 위에 있는 작은 layer다. 이건 매우 쉽지만 우리는 axios를 설치해야 한다. TERMINAL에 npm i axios를 해주면 된다.

우리가 쓸 API에 대해서 이야기할게, 우리는 YTS에서 만든 API를 사용할 것이다. 

 

YTS 검색 - 사이트 하단에 API 클릭 - list Moive - .json 복사

yts는 불법적으로 영화를 올리는 거라서 url이 항상 변경된다. 그래서 니콜라스가 yts proxy API를 만들었다. 

 

API를 사용하려면

https://yts.mx/api/v2/list_movies.json

그러면 axios를 import하자

import axios from 'axios'; 

우리는 axios로 부터 온 data를 잡아야하기 때문에

    const movies = axios.get("https://yts.mx/api/v2/list_movies.json");

const movies를 추가해 준다.

axios.get은 항상 빠르지 않기 때문에 기다려야한다.

JS에게 componentDidMount 함수가 끝날때까지 약간 시간이 걸릴 수 있다고 말해야한다. 우리는 그걸 기다려야 한다. 그걸 위해 우리는 componentDidMount 앞에 async를 넣을 것이다. 

  async componentDidMount(){
    const movies = axios.get("https://yts.mx/api/v2/list_movies.json");
  }

또는 getMovie라는 function을 만들자

  getMovies = () => {
    const movies = axios.get("https://yts.mx/api/v2/list_movies.json");
  }
  componentDidMount(){
    this.getMovies();
  }

하지만 우리는 JS에 다시 말해야 한다. 우리의 getMovie function에게 시간이 조금 필요하다고 그래서 우리는 그걸 기다려야한다. async와 await

  getMovies = async () => {
    const movies = await axios.get("https://yts.mx/api/v2/list_movies.json");
  }

async는 이 함수가 비동기라고 한것이다. 이 말은 "너는 이걸 기다려야해"라는 말이다.

함수 내부에서는 내가 뭘 기다려길 원해? axios? 라는 물음에 "응"이라고 하는 것과 같다.

axios가 끝날 때까지 기다렸다가 계속한다. 이게 우리가 한 것ㅇ다. 이게 새로운 JS의 마법이다.

 

복습

application은 render하고

 처음에는 isLoading:true하고 그래서 Loading을 볼 것이다. 이제 application이 mount된 후, 우리는 getMovies function을 호출할 것이다. 그리고 getMovies는 axios.get을 사용해 하지만 axios.get은 완료되기까지 시간이 조금 필요하기 때문에 await을 넣었다. 문제는 만약 우리가 async를 사용하지 않는 다면 await를 사용할 수 없다는 것이다.

async await을 하는 것은 우리가 기본적으로 JS에게 getMoives function에게 조금 시간이 필요하고 우리는 그걸 기다려야만 한다는 것을 말하는 것이다. async와 await을 사용하지 않으면 JS는 function을 기다리지 않을 것이다. 이걸 쓰지 않으면 더 많은 코드를 써야한다. 그래서 이 경우에는 우리는 async와 await을 써야한다. 그게 다다. 우리는 접근이 끝날때까지 기다릴 것이다. 다음 비디오에서 보자! 거기서 우리는 movie data를 가져와서 state에 있는 render function을 보여줄 것이다.