axios 설치

$ npm i axios

movie API

API: https://yts-proxy.now.sh/list_movies.json
↪️ 출처

GO GO

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

class App extends React.Component {

  state = {
    isLoading: true,
    movies: []
  }

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

  componentDidMount () {
    this.getMovies();
  }

  render() {
    const {isLoading} = this.state;
    return (
      <div>
        {isLoading ? "Loading..." : "We are Ready!"}
      </div>
    );
  }
}

export default App;

async, await

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

getMovies가 비동기(async)라는 것을 알려주고,
movies는 axios가 데이터를 가져올 때까지 기다린다(await).

정리

1. App은 render() 하면서 처음 isLoading 상태는 true
2. App이 마운트 된 후에는 getMovies()를 호출
3. getMovies()는 axios를 사용하지만 완료 될 때까지 시간이 걸리는 걸 체크