movie.js

import PropTypes from "prop-types";
import { Link } from "react-router-dom";
function Movie({id, medium_cover_image, title, summary, genres}){
    return   <div>
    <li
    ><h2>
      {/* <Link to={'/movie/${id}'}>{title}</Link>    작은따옴표 대신 백틱 사용하기*/ } 
      <Link to={`/movie/${id}`}>{title}</Link>
    </h2> 
   </li>
    <img src={medium_cover_image} alt={title} />
    <p>{summary.length >235 ? `${summary.slice(0, 235)}...`: summary}</p>
    <ul>
      {genres.map((g)=>(
    <li key={g}>{g}</li>
    ))}
    </ul>
    
    
  </div>;
}

Movie.propTypes={
  id:PropTypes.number.isRequired,   
    medium_cover_image:PropTypes.string.isRequired,
    title:PropTypes.string.isRequired,
    summary:PropTypes.string.isRequired,
    genres:PropTypes.arrayOf(PropTypes.string).isRequired
};

export default Movie;  

Home.js

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

function Home(){
    const [load, setLoad]=useState(true);
    const [movies, setMovies]=useState([]);
    const getMovies =  async()=>{
      const json =await(
      await fetch( 
        "<https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year>"
       )
      ).json(); 
        setMovies(json.data.movies);
        setLoad(false);  
    };
    useEffect(()=>{
      getMovies(); 
    }, [] );
    return (
      <div>
        {load ? <strong>로딩중...</strong>: 
        movies.map(movie =>
         
        <Movie
         key={movie.id}
         id={movie.id}
         medium_cover_image={movie.medium_cover_image}
         title={movie.title}
         summary={movie.summary}
         genres={movie.genres}/>   
         )}
      </div>
    );
}

export default Home; 

App.js

import{
  BrowserRouter as Router,
  Switch,
  Route,
}from "react-router-dom";
import Home from "./routes/home";
import Detail from "./routes/detail";
function App() {
  return <Router>
    <Switch>
      <Route path="/movie/:id">
        <Detail />
      </Route>
      <Route path="/">
        <Home />
      </Route>
    </Switch>  
     </Router>;
}

export default App;