노마드코더님 _ React #3

// fetching하는 방법에 대한 것(그러나 axios가 더 좋은 방법)

// 터미널에서 npm i axios 해서 일단 깔어(i는 인스톨의 약자)



import React from "react";

import axios from "axios";



// YTS 홈페이지에서 API >



class App extends React.Component {

  state = {

    isLoading: true,

    movies: [],

  };



  getMovies = async () => {

    const {

      data: {

        data: { movies },

      },

    } = await axios.get("http://yts-proxy.now.sh/list_movies.json");

    this.setState({

      movies,

      isLoading: false,

    });

  };



  //movies를 콘솔로그 해보면 data폴더 > data폴더 > 영화들 객체가 있다.

  //즉 movies.data.data.movies를 그걸 {data: {data:{movies}}}로 쓸 수 있다.



  componentDidMount() {

    this.getMovies();

  }

  //axios.get을 통해서 json문서에서 데이터를 잡아야 함 그래야 state에 사용할 수 있음

  //하지만 axios는 좀 느리기에 mount될때까지 기다려야 함. 그래서 async를 넣을거야

  //또다른 방법은 함수를 따로 만들어서 (getMovie) 넣어주는 것이다.

  //이 함수가 비동기라고 한 거다. 이 말은 '너는 이걸 기다려야 해'라는 말임(await)



  render() {

    const { isLoading } = this.state;

    // 이걸 하게되면 아래 행<div>다음에 나오는 거에 this.state.isLoading이라고 안써도 됨

    //위에서의 isLoading과는 별개로 생각한다음 보자.

    return (

      <div>

        {isLoading ? "Loading" : "We are ready"}

        {/* 이건 리액트가 아니라 자바스크립트다 */}

      </div>

    );

  }

}



export default App;