nomad coder movie[2]

BackEnd_Ash.log·2020년 4월 3일
0

react-movie

목록 보기
2/6

components/Movie

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 에서 받기

home.js 에 보시면 ,

          <div className="movies">
            {movies.map(movie => (
              <Movie
                key={movie.id}

이렇게 적혀있었습니다.

저기 state 에서 가져오게 됩니다.

어떻게 가져오냐 ??

const = {isLoading , movies } = this.state;
로 가져와서 뿌려줍니다.

Movie.js

그렇게 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>
  );
}

이렇게 파라미터로 받아서 , 적절히 뿌려주면 됩니다.

Prop

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
};
profile
꾸준함이란 ... ?

0개의 댓글