영화 API 사용해보기

1. axios 설치하기

터미널에 npm install axios를 입력한다.

 

2. YTS 영화 데이터 API 살펴보기

API Documentation - YTS YIFY

ListMovies를 눌러 아래 페이지로 들어간다.

https://yts.mx/api/v2/list_movies.json 을 검색창에 뜨면 아래와 같이 나온다.

※ 크롭 웹 스토어에서 json viewer을 설치한 화면이다.

 

3. App.js파일에 API를 추가한다.

※위 YTS에서 제공한 API는 변경가능성이 있어 노마드코더가 제공한 API를 사용했다.

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-proxy.now.sh/list_movies.json');

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

  }

  componentDidMount() {

    this.getMovies();

  }

  render() {

   

    const {isLoading} =this.state;

    return <div>{isLoading ? 'Loading...' : 'We are ready'} </div>;

     

   

  }

}

export default App;

App.js파일을 위와 같이 수정하면 API사용 준비는 끝난 것이다.