#4.1 Rendering the Movies

좋아, 이제 API에서 data를 가져왔어, console.log로 우리가 무슨 데이터를 보자,

data를 제외하고는 신경안써도됨.!

data - data - movies를 원한다.

    console.log(movies.data.data.movies);

하면 20개의 movie 리스트를 받을 수 있다. 하지만 밑줄친 부분은 별로다. 왜냐하면 우리는 ES6를 사용하는데, ES6는 ECMA script의 새로운 버전이다.

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

이렇게 쓰는 것이 더 좋다.

이 받은 movies를 state안 movies에 넣을 것이다.

두 movies 중에 하나는 setState의 movies이고, 다른 하나는 axios에서 온 movies이다. 하지만 JS는 똑똑해서 단축해서 사용가능하다.

  getMovies = async () => {

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

    this.setState({movies});

  }

하지만 아직 뜨지 않는다. 왜냐하면 isLoading : true이기 때문이다.

그래서

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

문제는 우리가 "We are ready"를 가지고 있지 않다. 그래서 movie.js라는 파일을 새롭게 만들어 보자. 우리가 할 일은  movie를 render할 것이다.

 

우선 모듈들을 import한다

그리고 이 경우에는 상상할 수 있다시피 movies component는 state를 필요로 하지 않는다. 그래서 만약엔 component가 state가 필요 없는 경우에는 이게 class component가 될 필요는 없다.

Movie.js

import React from 'react';
import PropTypes from 'prop-types';

function Movie({id, year, title, summary,poster}){
    return <h4>{title}</h4>;
}

Movie.propTypes = {
    id: PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired
};

export default Movie;

render(){return}에 바로 넣어도 되고, renderMovie()라는 function을 만들어서 넣어도 된다!

 

니콜라스는 전자로 할 것이고, 우리는 state로 부터 movies를 가져와야 한다! 잊지마. 이렇게 하지 않으면 this.state.movies이렇게 해야하기 때문에 const {isLoading, movies}로 해준다. 

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

class App extends React.Component{
  state = {
    isLoading: true,
    movies : []
  }
  getMovies = async () => {
    const {data:{data:{movies}}} = await axios.get("https://yts.mx/api/v2/list_movies.json?sort_by=rating");
    this.setState({movies, isLoading:false});
  }
  componentDidMount(){
    this.getMovies();
  }
  render(){
    const {isLoading, movies} = this.state;
    return <div>{isLoading ? "Loading" : movies.map(movie => {
      console.log(movie)
      
    })}</div>;
  }
}

export default App;

이렇게 해주고, map은 항상 뭔가를 return해야 한다. Movie를 import하고 <Movie />로 해준다.

우리는 props도 필요하다.

import React from 'react';
import axios from 'axios';
import Movie from './Movie';

class App extends React.Component{
  state = {
    isLoading: true,
    movies : []
  }
  getMovies = async () => {
    const {data:{data:{movies}}} = await axios.get("https://yts.mx/api/v2/list_movies.json?sort_by=rating");
    this.setState({movies, isLoading:false});
  }
  componentDidMount(){
    this.getMovies();
  }
  render(){
    const {isLoading, movies} = this.state;
    return <div>{isLoading ? "Loading" : movies.map(movie => {
      console.log(movie);
      return <Movie id={movie.id} year={movie.year} title={movie.title} summary={movie.summary} poster={movie.
        medium_cover_image}/>;
    })}</div>;
  }
}

export default App;

console.log(movie); 지우기

 

그러고 나면 warning이 온다. "key" prop을 가져야한다고!

  render(){
    const {isLoading, movies} = this.state;
    return <div>{isLoading ? "Loading" : movies.map(movie => {
      return <Movie key={movie.id} id={movie.id} year={movie.year} title={movie.title} summary={movie.summary} poster={movie.
        medium_cover_image}/>;
    })}</div>;
  }

key={movie.id}만 해주면 된다! 쟈쟌~

 

 

우리는 API로부터 데이터를 가져오고 있다

state를 사용해서 isLoading을 보여주고 있다.

그리고 데이터를 화면에 보여준다. 그게 올때까지 Loading을 띄워주다가 오면 짜잔하고 데이터를 보여준다.