4. fetch 비동기형식

App3.js 

import React, { Component } from "react";
import "./App.css";
import Movie from "./Movie";
 
class App extends Component {
  state = {};
 
  componentWillMount() {
    //request API
    console.log("componentWillMount() called");
  }
  //통신-------
  componentDidMount() {
    // $.get('',function(response){}
    // });
    this._getMovies();
  }
 
  _getMovies = async () => {
    //async붙이면 비동기
    const movies = await this._callApi(); //await는 비동기를 잠시 중지시켜놓는것 - return 할때까지 기다려준다.
    this.setState({
      movies: movies
    });
  };
  _callApi = async () => {
    return (
      fetch("https://yts.am/api/v2/list_movies.json?sort_by=rating") //비동기형식
        //.then((response)=>console.log(response))
        .then(response => response.json())
 
        // .then((response)=> {//fetch결과가 들어온다.
        //   return response.json();
        // })
 
        .then(json => json.data.movies)
 
        // .then(function(response) {//이식을 람다로 하면위처럼
        //   const result = response;
        //   return result;
        // })
        .catch(err => console.error(err))
    );
  };
 
  _renderMovies = () => {
    //만든함수는 앞에 _ 하고 되도록 람다형식으로
    //const movies = [<Movie/>,<Movie/>,<Movie/>];//이런식으로 넣어주는것
    const movies = this.state.movies.map((movie, index) => {
      console.log(movie);
      return (
        <Movie
          title={movie.title}
          poster={movie.medium_cover_image}
          genres={movie.genres}
          synopsis={movie.synopsis}
          key={index}
        />
        
      );
    });
    return movies; //jsx배열(컴포넌트)
  };
 
  render() {
      const {movies} =this.state;
    return (
      <div className={ movies ? 'App' : 'App--loading'}>
        {//this._render()
            movies ? this._renderMovies() : "loading...."
        //무비 목록이 null이면 로딩이다가 rend받아 들어오면 this._render 실행됨
        }
      </div>
    );
  }
}
 
export default App;
 

2.의 App2.js와 달라진 점DidMount안 정리, _getMovies 함수 - 비동기형식(async) _callApi에서는 fetch로 api의 결과를 json으로 가져와서 배열에 넣어줌 원하는 이름을 적고 값을 보여줌.

- fetch에서 지정 api값의 json데이터를 가져온다. json.data.movies에 넣어진다.

render의 const{movies} = this.state;를 씀으로써 render안에서 movies를 불러올수있다.

_renderMovies함수는 state가 있을때만 state안의 데이터를 반환해준다.