[DEV] 리액트 05 - Axios로 영화 뿌리기

headerimg

경고

공부기록용임. 코드나 커리큘럼 방식 등 모든 지적 재산권은 노마드 코더에게 있으며, 무료로 볼 수 있으니 들어가서 여기서 공부할 것!! 갓 니콜라이 노마드 코더님 만세! https://academy.nomadcoders.co

드디어 무비앱을 만드는구나 행볶

Fetching Movies

api를 받아오는 툴은 axios를 사용한단다. 니꼴라스왈 axios는 땅콩을 감싼 멋진 초콜릿이야. axios는 기본적으로 http요청을 하는 통신 모듈이다. npm으로 설치 가능!

npm i axios

무료 api는 yts에서 가져올 수 있다. yts는 불법 토렌트 사이트인데..

거기다가 url이 자주 바뀐다고 한다. 그러니 갓니꼴라스가 만든 갓니꼴라스 깃허브 여기서 proxy api를 가져올 수 도 있다.

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

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      apiUrl: 'https://yts-proxy.now.sh/list_movies.json?sort_by=rating',
      // sort_by=rating을 추가함.
      isLoading: true,
      movies: []
    }
  }

  // js에게 async와 await는 getMovies function은 조금 시작이 필요하고 우리는 기다려야한다 라는 뜻이다.
  getMovies = async () => {
    const {data:{data:{movies}}} = await axios.get(this.state.apiUrl);
    this.setState({ movies, isLoading: false });
  }
  componentDidMount(){
    this.getMovies();
  }
  render(){
    const { isLoading } = this.state;
    return (
      <div>
        {isLoading ? "Loading..." : this.renderMovie()};
      </div>
    )
  }
  // 로딩이 다되면 Movie Component를 호출함.
  renderMovie(){
    return (
      this.state.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}
          />
        );
      })
    )
  }
}

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

Movie.prototype = {
  id: PropTypes.number.isRequired,
  year: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  poster: PropTypes.string.isRequired
};

자 그리고 커스텀좀 해볼까 SASS추가하고

npm install node-sass –save 파일좀 만들고 import 시켜서 적용하면 끝.

image

이것 저것 만들고 싶어서 일단 이렇게 만들어 봄. 갓니꼬는 다른 스타일을 하니 확인해볼 것.


© 2018. All rights reserved.