[react] axios, yts api

목표:

 

yts api 가 제공하는 최신 영화 데이터를 axios로 받아 화면에 그려줄 것이다.

 

 

import React from "react";

import './App.css';

class App extends React.Component {
  state = {
    isLoading : true,
    movies : []
  };

  componentDidMount(){
    
  };
  render(){
    const {isLoading } = this.state;
    return <div>
    {isLoading ? "Loading..." 
    : "we are reay"}
    </div>
  };
};


export default App;

 

이전 게시글 소스에 이어서 

yts api 가 제공하는 최신 영화 데이터를 axios로 받아 화면에 그려줄 것이다.

(*https://yts-proxy.now.sh/list_movies.json)

(*크롬에서 jsonview 라는 확장프로그램을 쓰면 json 파일을 예쁘게 볼 수 있다)

 

어떻게 뿌려주냐...

 

http 통신을 함에 있어 인기 있다는 javascript 라이브러리인 axios로. (검색을 하니 그렇다고 한다)

axios는 익스8 이상을 포함한 모든 최신 브라우저를 지원하고,

Promise 를 기반으로 하여 async/await 문법을 사용하여

XHR (:Microsoft가 만든 JavaScript 객체(object)) 요청을 매우 쉽게 할 수 있다.

 

 

 

axios 설치하기

 

 

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

import './App.css';

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 : movies, isLoading : false})
    // console.log(movies)
    // console.log(movies.data.data.movies)
  }
  componentDidMount(){
    this.getMovies();
  }
  render(){
    const {isLoading, movies } = this.state;
    return <div>
    {isLoading ? "Loading..." 
    : "we are ready"}
    </div>
  }
}


export default App;

 

axios 를 import 시켜주고,

reder 함수 이후에 호출되는 componentDidMount에 들어갈 함수인

getMovies 를 생성.

getMovies 는 axios 를 이용해 yts api 주소로 부터 데이터를 데려온다.

 

 

그리고, 그 방대한 데이터 중에 우리는

영화 관련한 데이터들만 가져오기 위해

 

 

const movie = axios.get("url") 을 console.log한 결과

 

const movies = axios.get("url") 값을 다시 세밀하게 고칠 필요가 있다.

 

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

// console.log(movies.data.data.movies)

이렇게!

원래는 const movie.data.data.movies 인데 이걸 ES6 문법으로 쓰면

위와 같다고 한다. (노마드 코더... 당신 너무 트렌디해)

 

그리고 이 전달 받은 값인 movies 를 state 안에 넣는다.

 

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

 

isLoading 값을 false 로 바꿔줌으로써,

"we are ready" 영역에 우리가 진짜 하려고 했던

무비 관련 값을 넣어줄 거다.

 

 

 

 

-> 여기서부터 무비 렌더링하는 설명

 

Movie.js 라는 파일을 생성. (화면단에 보이는 파일이 되겠다)

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

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

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;

 

컴포넌트가 state 가 필요 없는 경우 컴포넌트가 class App extends React.Component 형식일 필요는 없다.

Movie 라는 컴포넌트가 app.js 에 전달할, 그러니까 얻어올 props를 찾아야 한다.

이 코드에서는 id year title summary poster 정도로 정했다.

 

그리고 다시 Movie 컴포넌트로 가서 id year title summary poster를 준비시킨다.

 

이 준비된 Movie 컴포넌트를 app.js 에 렌더링 시키자.

 

 

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

 

아까 열심히 axios 로 yti api 에서 가져온 movies 라는 배열 객체를

map 함수로 돌린다.

그래서 리턴 받고 싶은 값은?

<Movie />

 

<Movie /> 컴포넌트 안에 필요한 props 는?

id year title summary poster

(* 맵 함수 안에 있는 movie 라는 값은 movie1 로 해도 동작한다, 전달용으로 기재되는 값이라 그런가? 당연히 아래에 movie.id 값들을 전부 movie1.id 식으로 바꿔야 함)

 

 

 

 

결과:

yti api 가 로딩될 때 Loading,

로딩이 끝나면 yti api 에서 가져온 데이터가 화면에 그려진다.

 

 

https://mollang.herokuapp.com/

React App

 

 

와... 어렵다