#4.1 Rendering the Movies

#4.1 Rendering the Movies

🧸 이번 시간에는 지난시간에 가져온 API의 data를 가지고 render를 해볼 것이다.

지난 시간까지 우리는 API에서 data를 가져왔다. console.log로 데이터를 보자, 우리가 뭘 가져왔는지 보자.

console.log(movies)로 확인해본다.

우리가 원하는 것은 movies 안의 data 안에 data 안에 movies 라는 것이다.

 

 

getMovies = async () => {

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

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

  }

이렇게 콘솔을 찍으면 영화 20편의 데이터가 콘솔에 출력되는 것을 볼 수가 있다.

그런데 이렇게 쓰는 것보다 ES6의 문법을 이용해서 객체 비구조화 할당을 해보자.

 

getMovies = async () => {

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

    console.log(movies);

  }

그 다음에 우리가 할 것은, 이 얻어온 movies를 state에 넣어주어야 한다.

state의 값을 변경하는 것은 저번에 setState를 이용하면 된다고 했으니 그것을 이용하여 작성한다.

 

 getMovies = async () => {

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

    this.setState({movies: movies});

  }

그런데 이렇게 movies:movies로 이름이 같으면 하나로 쓸 수 있다.

 

getMovies = async () => {

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

    this.setState({movies});

  }

여기서 생각해야할 것은 movies:movies에서 처음 movies는 state 안에 있는 movies를 말하고, 뒤의 movies는 axios를 이용해서 얻어온 movies를 말한다.

또한 isLoading도 false로 바꿔주자.

 

getMovies = async () => {

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

    this.setState({movies, isLoading: false});

  }

이렇게 하면, 실행했을 때 Loading … => we are ready 로 바뀌게 되는데, 그게 movies를 얻어왔다는 신호인 것이다.

 

🧸Movie.js 만들기

이제 본격적으로 해보기 위해서, we are ready보다는 진짜 영화 목록이 뜨는게 좋을테니까 Movie.js를 만들어본다.

우리가 할 일은 실제로 movies를 render를 할 것이다.

 

그리고 movies 컴포넌트는 state를 필요로 하지 않는다.

(state는 변경되고 싶은 데이터니까 그런 듯. 변경 될 필요가 없이 그냥 그대로 가져와서 보여주기만 하면 되니까 그런듯)

그래서 만약 컴포넌트가 state가 필요 없을 경우에는 이게 꼭 클래스 컴포넌트일 필요는 없다. 그냥 함수 컴포넌트(function component)로 만든다.

 

import React from "react";

import PropTypes from "prop-types";

function Movie(){

    return <h1></h1>

}



export default Movie;

그리고 우리는 Movie의 propTypes를 지정한다.

데이터를 살펴보면 movies에는 id도 있고, 그건 number여야 하고.

 

그리고 우리는 영화를 평점으로 정렬하고 싶기 때문에, axios 그 코드에서 링크 뒤에 ?sort_by=rating을 붙인다.

 

getMovies = async () => {

    const {data: {data: {movies}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");

    this.setState({movies, isLoading: false});

  }

✅App.js

 

그리고 다시 Movie.js로 와서, propTypes를 설정한다.

import React from "react";

import PropTypes from "prop-types";

function Movie(){

    return <h1></h1>

}

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;

id,year,title,summary는 있는 그대로 가져온거고, poster는 medium_cover_image인데 poster라는 이름으로 가져올 것이다.

 

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;

이렇게 작성해준 후, 이것을 App.js에서 렌더 해보자.

 

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-proxy.now.sh/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) =>

        <Movie

	key = {movie.id}

          id={movie.id}

          year={movie.year}

          title={movie.title}

          summary={movie.summary}

          poster={movie.medium_cover_image}

          />

      )}

    </div>

  );

  }

}

export default App;

 

그리고 key가 필요하다고 하니까(이거 예전에 배열 안에서는 props로 key가 식별하기 위해서 꼭 필요하다고 했었던 그거) key도 넣어준다. 우리는 어차피 id가 있으니까 그걸 key로 똑같이 주면 된다.

 

여기 까지 하면 영화의 제목이 잘 뜬다.

아직 우리는 다른 props는 이용하지 않았다. 다음 시간엔 다른 props를 이용하고, 더 예쁘게 수정해볼 것이다.