Rendering The Movies

우리는 API에서 data를 가져왔다. console.log를 통해 데이터를 확인해보자. 

console.log(movies);

movies라는 object가 콘솔창에 표시된다.

 

여기서 우리는 data를 원한다. data를 클릭해보면 그 안에 또 data가 있고 그 안에 movies가 있는 것을 확인할 수 있다.  따라서 우리는 movies.data.data.movies를 사용할 수 있다. 또한 movies.data.data.movies보다는 다음과 같은 방식을 사용하자. 

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

그 다음으로 우리가 할 일은, 이 movies를 state안에 넣을 것이다. 그러기 위해서 다음과 같이 setState를 사용하자.

this.setState({movies:movies})

여기에서 왼쪽의 movies는 setState의 movies이고, 다른 하나는 axios에서 온 movies이다. 이 둘은 다르다, 하나는 state에 있고 다른 하나는 axios에서 온 것이다. 또한 최신의 자바스크립트 문법에 따라 이를 다음처럼 좀 더 단축된 코드로 작성할 수 있다.

 

this.setState({ movies });

 

우리는 또한 isLoading을 바꿔줘야 한다. 

 

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

따라서 이제는 새로고침을 하면, Loading...이 나오다가 getMovies의 axios.get을 통한 data를 정확히 받아오게 되면 We are ready으로 Loading...에서 바뀌게 된다.

 

다만 우리는 이제 We are ready가 아닌 axios.get에서 받아온 data를 화면에 표시해보자.

 

따라서 새로운 movie.js라는 새로운 파일을 만들어 보자.

이제 우리가 할 일은 실제로 movies를 render 할 것이다. 예상했을 수도 있겠지만, 이 경우에는 movies component에는 state를 필요로 하지 않는다. 그래서 만약에 component가 state가 필요 없을 경우에는 이게 class component가 될 필요는 없다. 따라서 이 경우에는 function component를 쓰면 된다.  

 

중요한 건 우리가 얻어 올 props를 찾기 시작하는 것이다. Movie.propTypes을 설정을 하면서 API로부터의 응답을 살펴보자.  

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

 또한 이 API는 Sort_by rating을 제공한다. 따라서 rating 별로 정렬할 수 있다. 그렇게 하기 위해선 getMovies안의 axios.get의 url에 다음 코드를 추가해준다.

 

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 });
  };

앞서서 우리는 id, year, title, summary, poster를 가져왔기 때문에, Movie component로 가서 이들을 준비해줘야한다. 즉, 다음과 같이 props를 연결해줘야한다. 

 

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

제대로 코드가 구현되는지 테스트하기 위해 다음과 같이 Movie component안의 h3태그에 다음과 같은 코드를 넣어준다. 

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

 

그리고 이것을 테스트하려면 render을 해줘야 하기 때문에 부모 컴포넌트인 App.js 코드를 다음과 같이 작성해준다. 우리는 state로부터 movies를 가져와야 한다는 것을 명심해야 한다.

 

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) => (
              <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;

 

이러면 우리는 API로부터데이터를 잘 가져오고 있는 것을 확인할 수 있다. 현재 우리는 data가 올 때까지 기다리고, data가 도착하면 우리는 데이터를 보여주고 있다.