[React JS] 영화 웹 서비스

nomad Coders의 React JS로 영화 웹 서비스 만들기 영상을 참고하여 만들었습니다.

 

결과 : https://mmingyy.github.io/movie_app/

코드 :

[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 () => {

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

    this.setState({ movies, isLoading: false });//{movies(state꺼):movies(axios꺼)}

  };

  async componentDidMount() { //render시 호출됨

    this.getmovies();

  }

  render() {

    const { isLoading, movies } = this.state;//state로부터 isLoading,movies가져옴

    return (<section class="container">

      {isLoading ? (

        <div class="loader">

          <span class="loader__text">Loading..</span>

        </div>

      ) : (

          <div class="movies">

            {movies.map(movie => (

              <Movie

                key={movie.id}//list의 child는 unique한 key prop가져야

               id={movie.id} year={movie.year}

   title={movie.title} summary={movie.summary}

         poster={movie.medium_cover_image} />

            ))}</div>

      )}

          </section>

    );

  }

}

export default App;

 

[Movie.js]

import React from 'react';

import PropTypes from 'prop-types';



function Movie({ year, title, summary, poster }) {

    return (<div class="movie">

        <img src={poster} alt={title} title={title}/>

        <div class="movie__data">

         <h3 class="movie__title">{title}</h3>

         <h5 class="movie__year">{year}</h5>

       <p class="movie__summary">{summary}</p>

        </div>

    </div>

    );

}

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;

 

[package.json]

"scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "deploy": "gh-pages -d build",

    "predeploy": "npm run build"

  },

 
  //사이트 넣어줘야 함 (gh-pages 이용)
  "homepage": "https://mmingyy.github.io/movie_app"

 

------------------------------------------------------------------------------------------------------------------------

참고 : nomadcoders.co/react-fundamentals

ReactJS로 영화 웹 서비스 만들기 - Nomad Coders