import React from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import "./Movie.css";
function Movie({ id, year, title, summary, poster, genres }) {
return (
<div className="movie">
<Link
to={{
pathname: `/movie/${id}`,
state: {
year,
title,
summary,
poster,
genres
}
}}
>
<img src={poster} alt={title} title={title} />
<div className="movie__data">
<h3 className="movie__title">{title}</h3>
<h5 className="movie__year">{year}</h5>
<ul className="movie__genres">
{genres.map((genre, index) => (
<li key={index} className="genres__genre">
{genre}
</li>
))}
</ul>
<p className="movie__summary">{summary.slice(0, 180)}...</p>
</div>
</Link>
</div>
);
}
Movie.propTypes = {
id: PropTypes.number.isRequired,
year: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
summary: PropTypes.string.isRequired,
poster: PropTypes.string.isRequired,
genres: PropTypes.arrayOf(PropTypes.string).isRequired
};
export default Movie;
우선적으로 import 한 내용을 보겠습니다.
import { Link } from "react-router-dom";
이라고 적혀있습니다.
앞전에 react-router-dom 에서 지원해주는 녀석들이 있었는데요 .
그중에서 Link 는
새로고침을 하기 위해선, 리액트 라우터에 있는 Link 컴포넌트를 사용해야합니다. 이 컴포넌트를 사용하면 페이지를 새로 불러오는걸 막고, 원하는 라우트로 화면 전환을 해줍니다.
그리고 3번째 import
import PropTypes from "prop-types" ;
입니다.
내용이 길어서 ;;
https://ko.reactjs.org/docs/typechecking-with-proptypes.html
document 자료를 보시면 될것 같습니다.
home.js 에 보시면 ,
<div className="movies">
{movies.map(movie => (
<Movie
key={movie.id}
이렇게 적혀있었습니다.
저기 state 에서 가져오게 됩니다.
어떻게 가져오냐 ??
const = {isLoading , movies } = this.state;
로 가져와서 뿌려줍니다.
그렇게 Movie 에게 전달한것을 Movie.js 가 받게 됩니다
어떻게?? =>파라미터로 받게되요 .
function Movie({ id, year, title, summary, poster, genres }) {
return (
<div className="movie">
<Link
to={{
pathname: `/movie/${id}`,
state: {
year,
title,
summary,
poster,
genres
}
}}
>
<img src={poster} alt={title} title={title} />
<div className="movie__data">
<h3 className="movie__title">{title}</h3>
<h5 className="movie__year">{year}</h5>
<ul className="movie__genres">
{genres.map((genre, index) => (
<li key={index} className="genres__genre">
{genre}
</li>
))}
</ul>
<p className="movie__summary">{summary.slice(0, 180)}...</p>
</div>
</Link>
</div>
);
}
이렇게 파라미터로 받아서 , 적절히 뿌려주면 됩니다.
Movie.propTypes = {
id: PropTypes.number.isRequired,
year: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
summary: PropTypes.string.isRequired,
poster: PropTypes.string.isRequired,
genres: PropTypes.arrayOf(PropTypes.string).isRequired
};