#7.4 Movie App part Two

<div key={movie.id}>
    <h1>{movie.title}</h1>
    <p>{movie.summary}</p>
    <img src={movie.medium_cover_image} />
    <ul>
    	{movie.genres.map((genre) => <li key={genre}>{genre}</li>)}
	</ul>
</div>

 

medium_cover_image 자바스크립트에서는 왼쪽보다 오른쪽처럼 작성 mediumCoverImage

import PropTypes from "prop-types";

 

Movie component의 proptype 설정

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

 

React Router

페이지 전환

react-router-dom 설치 필요

npm install react-router

npm install react-router-dom

 

스크린 별로 컴포넌트가 나뉘기 때문에 이제 route 별로 생각해야 한다

 

 

App.js

function App() {
  return null;
}

export default App;

 

Detail.js

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

export default Detail;

 

Home.js

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

function Home() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);

  const getMovies = async () => {
    const response = await fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9.6&sort_by=year");
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
  }

  useEffect(() => {
    getMovies()
  }, []);

  console.log(movies);

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

export default Home;

 

Movie.js

import PropTypes from "prop-types";

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

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

export default Movie;