[React] #7.4 Movie App part Two

App.js

import { useEffect, useState } from 'react';
import Movie from './components/Movie';

function App() {
  return null; //router를 render함 
  //-> router는 URL을 보고있는 component고
  //URL이 localhost면 Home.js , /movies/122 이면 Detail.js을 보여주는 식
}
export default App;

 

/routes/Home.js

import { useState } from "react";
import Movie from "../components/Movie";

function Home () {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async() => {
    const json = await(
      await fetch( //then과 같은 await
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
      )).json();

    setMovies(json.data.movies);
    setLoading(false);
  }
  useEffect(() => {
    getMovies();
  }, []);
  return (
    <div>
      {loading ? <h1>Loading...</h1>: //Movie.js 컴포넌트로 빼서 변경
        movies.map(movie => ( //key는 React.js에서만, map안에서 component들을 render할 때 꼭 필요함
        // Movie component로 properties 보내기
        <Movie key={movie.id} coverImg={movie.medium_cover_image} title={movie.title} summary={movie.summary} genres={movie.genres}/>
      ))}
    </div>
  );
}
export default Home;

 

/components/Movie.js

import PropTypes from "prop-types";

// parent 컴포넌트로부터 movie 컴포넌트가 받아오는 property들
function Movie({ coverImg, title, summary, genres }) {
    return (
    <div>
    <img src={coverImg} alt={title}/>
    <h2>{title}</h2>
    <p>{summary}</p>
    <ul>
      {genres.map((g)=>
        <li key={g}>{g}</li>
      )}
    </ul>
  </div>
  );
}
//propertis의 타입 설정
Movie.propTypes = {
    coverImg: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    genres: PropTypes.arrayOf(PropTypes.string).isRequired
}

export default Movie;