영화 앱 만들기 -2-

이제 영화 전체를 보여주는 페이지가 아닌 영화이미지를 클릭했을때 영화상세 페이지를 보여주는 기능을 만들어보자.

일단 기존에 존재했던 App.js에 있던 코드를 분리해보자

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

위의 코드를 Movie.js라는 파일을 새로 만들어 옮긴다.

import PropTypes from "prop-types";
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>
  );
}

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

export default Movie;

옮긴 뒤 movie가 정의 되어있지 않아 오류가 나는 coverImg, title, summary, genres 앞의 movie를 지워주고

props 에 coverImg, title, summary, genres를 넣어주자

function Movie({ coverImg, title, summary, genres })

그리고 PropTypes를 사용해 prop 종류를 제한해준다.

다시 App.js로 와서 Movie 컴포넌트를 추가해준다.

컴포넌트만 추가해준다고 끝이 아니기에 프로퍼티도 추가해준다.

여기에 추가되는 프로퍼티는 API에 있는것과 같아야해서 마음대로 명명하면 안된다.

key 값을 넣어주는것도 잊지말자

<Movie
              key={movie.id}
              coverImg={movie.medium_cover_image}
              title={movie.title}
              summary={movie.summary}
              genres={movie.genres}
            />

라우트 기능을 구현하기전에 components와 routes 폴더 생성과 App.js 를 비우고
Home.js로 옮겨주어야 할 필요성이 있다.

import { useState, useEffect } 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(
        `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>
      ) : (
        <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;

App.js에 있던 코드를 Home.js로 이동시키고 오류가 나는 부분을 import 해주자

to be continue...