10. Practice Movie App - part Two

Visual Studio Code 툴 내 터미널에서 아래 명령어를 실행한다.

: npm i prop-types

: npm install react-router-dom

 

App.js

import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';

import Movie from "./components/Movie";

function App() {
  return null;
}

export default App;

 

Movie.js

import PropTypes from "prop-types";     //prop-types를 사용하기 위해서는 터미널에서 npm i prop-types를 실행해야 한다!

function Movie({coverImg, title, summary, genres}){
    return(  
        <div>
            <div>
                <img src = {coverImg} alt={title}/>
                <h2>{title}</h2>
                <p>{summary}</p>
                <ul>
                {genres.map((g) => 
                    (<li>{g}</li>)
                    )}
                </ul>
            </div>
        </div>
  );
};

Movie.prototype = {
    coverImg : PropTypes.string.isRequired,
    title : PropTypes.string.isRequired,
    summary : PropTypes.string.isRequired,
    genres : PropTypes.arrayOf(PropTypes.string).isRequired
}

export default Movie;

Home.js

function Home(){
    const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async() => {
    const json = await(await fetch(`https://yts.mx/api/v2/list_movies.json?minimum_ration=8.8&sort_by=year`)).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  
  useEffect(()=>{

  //fetch 대신에 요즘 async-await를 사용한다.
    /* 
    fetch(`https://yts.mx/api/v2/list_movies.json?minimum_ration=8.5&sort_by=year`)
    .then(response => {
      response.json()
      .then((json) => {
        setMovies(json.data.movies)
        setLoading(false);
      });
    }); 
    */

    getMovies();


  }, []);

  return (
    <div>

      {
        loading ? (<h1>Loading...</h1>) 
        : (
            <div>
              {movies.map((movie) => (
                <Movie 
                  key = {movie.id}
                  coverImg = {movie.medium_cover_image} 
                  title = {movie.title} 
                  summary = {movie.summary} 
                  genres = {movie.genres} 
                />
              ))}
            </div>
          )
      }

    </div>
  );
};

export default Home;

 

Detail.js

function Detail(){
    return <h1>Detail</h1>
};

export default Detail;

 

practice-movie-app.z01

19.53MB

practice-movie-app.z02

19.53MB

practice-movie-app.z03

19.53MB

practice-movie-app.zip

12.96MB