[ React ] axios 사용과 영화 데이터 가져오기

axios 사용과 영화 데이터 가져오기

 

 

1. 라이브러리 설치

npm install axios

데이터를 읽어올때 사용하는 라이브러리 설치

 

 

2. 영화데이터 제공 사이트

https://yts.mx/api#list_movies

 

 

3. 크롬 확장프로그램 : JSON 문서 확인

크롬 확장기능 json view 에서 API를 통해 받아올 수 있는 데이터, json 문서를 깔끔하게 확인 가능하다.

 

사용 가능한 데이터로 변경

https://yts-proxy.now.sh/list_movies.json

 

 

4. 프로젝트 적용

3-1. axios 적용

📑App.js

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

class App extends React.Component {

  state={
    isLoading: true,
    movies: []
  };

  getMovies= async ()=>{ // 실행을 기다리게 설정
    // 점 연산자 data.data.movies
    // 성능 최적화
    // 구조 분해 할당 
    const {
      data:{
        data:{movies}
      }
    } = await axios.get('https://yts-proxy.now.sh/list_movies.json?sort_by=rating');

    // state movies : 구조분해 할당한 객체 movies
    this.setState({movies:movies,isLoading: false});
  }




  componentDidMount(){
    //setTimeout(()=>{this.setState({isLoading:false})},6000);
    this.getMovies();

  }

  render(){
   const {isLoading,movies} = this.state;

    return (
      <section className="container">
        <h2> Movie </h2>
        <div className="movie_list">
          { 
            isLoading ? (
              <div className="loding">Loding...</div>
            ) : 

              (
              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>
      </section>

    ); // return 
  }
}

export default App;