[ReactJS로 영화 웹 서비스 만들기] 04. MAKING THE MOVIE APP 01

Fetching Movies from API

일반적으로 javascript에서 data를 가져올때 fetch를 사용한다. 하지만 여기서는 fetch가 아닌 Axios를 이용할 것이다.

 

npm install axios

를 이용하여, axios를 설치하자.

 

API는 YTS의 API를 이용할 건데 이곳은 토렌트 사이트이다. 그래서 재공하는 API가 매번 변하는데, 이를 해결하기 위해 니꼬가 만든 yts proxy라는걸 만들었는데 이를 이용할 것이다.  

 

YTS API

API Documentation - YTS YIFY

 

YTS-proxy from nico

serranoarevalo/yts-proxy

 

axios 설치가 완료되었다면 import 해주자.

 

import axios from "axios";

 

설치가 완료되면, componentDidMount() 메소드에 axios를 이용해보자.  

 

import React from "react";
import axios from "axios";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  componentDidMount() {
    axios.get("https://yts-proxy.now.sh/list_movies.json");
  }
  render() {
    const { isLoading } = this.state; // ES6에서만 작동
    return <div>{isLoading ? "Loading..." : "We are ready"}</div>;
  }
}

export default App;

그러면 list_movies.json을 볼수있다. 뭔가 요청하고 있는것이다.  

 

API에서 데이터를 요청하고 그 데이터의 처리가 다될때까지 기다리게 하는 aysnc await를 이용하여, 어떤 데이터를 가져왔는지 console.log를 이용하여 확인해보자.  

import React from "react";
import axios from "axios";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = async () => {
    const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json");
    console.log(movies);
  };
  componentDidMount() {
    this.getMovies();
  }
  render() {
    const { isLoading } = this.state; // ES6에서만 작동
    return <div>{isLoading ? "Loading..." : "We are ready"}</div>;
  }
}

export default App;

가져온 데이터의 data를 확인해보자.

 

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

 

 

Rendering the Movies

가지고온 movies를 render할 Movies.js 파일을 만들어 아래를 작성하자.

 

// render movies
import React from "react";
import PropTypes from "prop-types";

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

Movie.propTyes = {
  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 "./Movies";

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");
    this.setState({ isLoading: false, movies });
  };
  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;