(반응) 매개변수

연구 날짜: 2023년 3월 21일

---

내 Home.js의 첫 번째 Movie.js에서 ID를 사용할 수 있도록

id={movie.id}를 지정해야 합니다.

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

그 결과 영화는 이제 ID를 소품으로 받습니다.
Movie.js에서

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

다음과 같이 ID를 추가할 수 있습니다.
다음 PropTypes에 ID를 추가할 수도 있습니다.

 id:PropTypes.number.isRequired,

이제 링크도 변경해야 합니다.

id 값을 얻었으므로

 <Link to={`/movie/${id}`}> {title}</Link>

쓸 때 URL을 클릭하면 영화의 고유 ID 경로로 이동합니다.

/movie/156663 => 이렇게

import PropTypes from "prop-types";
import { Link } from "react-router-dom";

function Movie({ id, coverImg, title, summary, genres }) {
  return (
    <div>
      <div>
        <img src={coverImg} alt="" />
        <h2>
           <Link to={`/movie/${id}`}> {title}</Link>
        </h2>
        <ul>
          {genres.map((g) => (
            <li key={g}>{g}</li>
          ))}
        </ul>
        <p>{summary}</p>
      </div>
    </div>
  );
}

// PropType 설정
Movie.propTypes = {
  id:PropTypes.number.isRequired,
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
};

export default Movie;