react.js로 영화 웹 서비스 만들기 -5 [ fetch 사용하기 ]

fetch대신 axios를 사용할 것인데 npm i axios로 다운받아야 된다. 다음
yts.am 에서 api를 받아볼 것이다. 근데 주소가 자주 바뀌기 때문에
학습자들을 위해서 api주소를 따로 떼주셨다.
https://yts-proxy.now.sh/list\_movies.json

비동기를 사용해서 처리한다.
비동기를 사용하는 이유는 간단하게 서버가 동시에 여러작업이 가능하게 하려는 이유.
혹은 사용자들 기준에서봤을 때 한 사용자가 요청하면 다른 사용자들은 기다려야 되는데 동시 다발적으로 조회가 가능하게 하는 등 여러 유용한 점이 있다.
https://okky.kr/article/866436

비동기를 사용하려면 해당 함수에 async를 반드시 넣어줘야 한다. 그래야 await를 사용해서 비동기를 가능하게한다.
좀 더 쉽게 설명하면 javascript에게 이 함수를 좀 기다려줘. 이 함수에서 await를 쓴 부분을 기다려줘. 이렇게 설명하는 것과 같다. 그렇지 않으면 javascript는 기다려주지 않는다.

import React from 'react';
import axios from 'axios';

/* 
4.0 fetch대신 axios를 사용할 것이다. fetch위에 있는 작은 layer라고 한다.
axios를 사용하려면 설치해야 한다. npm i axios
https://yts-proxy.now.sh/list_movies.json

순서
1. 처음에는 render() 실행되는데 isLoading : true
2. 화면에서 "Loading" 을 볼 것이다.
3. 이제 application이 mount된 후 getMovies function을 호출한다.
4. 하지만 axios.get을 호출할 때까지 시간이 걸리기 때문에 비동기를 사용해서 
*/

class App extends React.Component { // react.component는 많은 것을 가지고 있지만 우리는 state를 쓸 것이다.
  state = {
    isLoading : true
  }
  getMovies = async () => { // 비동기 사용 : async를 붙여서 기다려야 한다! 라는 명령을 내리고 밑에 await를 붙여서 무엇을 기다려야 하는지 지정한다. 이렇게 하면 axios.get이 끝날 때까지 기다릴 것이다.
    const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json") // axios는 아마 느릴 것이다. 그래서 componentDidMount()가 끝날때 까지 약간 시간이 걸릴 수 있다고 말해야 한다. 그러기 위해서 함수 앞에 async를 붙이거나 함수로 만든다.
  }
  componentDidMount() {
    this.getMovies(); // 컴포넌트가 mount되면 getMovies()함수를 실행해서 데이터를 읽는다. 하지만 시간이 조금 필요하다.
  }

  render() { 
    const {isLoading} = this.state; // this.state는 {isLoading : true} 를 담고 있다. const {} 이렇게 받음으로서 true 그대로 받는다.
    return <div>
      {isLoading ? "Loading" : "we are ready"}
      </div>
  }
}

export default App;