axios 사용하기

axios 설치 명령어(터미널에서)

npm install axios

[App.js]

import React from 'react';
import axios from 'axios';
import Movie from './Movie';
class App extends React.Component{    
  state={              
   isLoading: true,
   movies: []
  };
 
  getMovies = async () =>{      // async는 비동기를 말하며 await는 axios함수가 끝날떄 까지 기달리라는 뜻을 가진다.
    const {data : {data : {movies}}} = await axios.get('https://yts-proxy.now.sh/list_movies.json?sort_by=rating');
    // movies.data.data.movies로 써도 되지만 es6에서는 {data : {data : {movies}}}같은 방법으로도 사용 가능하다.
    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} 
          title={movie.title} 
          year={movie.year} 
          summary={movie.summary} 
          poster={movie.poster}
        />
      ))}
      </div>
      
    );    
  } 
}
 
export default App;

[Movie.js]

import React from 'react';
import PropType from 'prop-types';
 
function Movie({id, title, year, summary, poster}){
    return <h4>{title}</h4>
}
 
Movie.PropType = {
    id: PropType.number.isRequired,
    title: PropType.string.isRequired,
    year: PropType.number.isRequired,
    summary: PropType.string.isRequired,
    poster: PropType.string.isRequired
}
 
export default Movie;