React (11) - API #2 컴포넌트 활용하기

링크 클릭시 페이지 전환되는걸 해보자.

 

1. component를 활용하여 정리부터 (React의 장점을 써야겠지)

   ㄴ 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.PropTypes = {
//     coverImg: PropTypes.string.isRequired,
//     title:   PropTypes.string.isRequired,
//     summary: PropTypes.string.isRequired,
//     genres: PropTypes.arrayOf(PropTypes.string).isRequired,
// };


export default Movie;

API에 없는 정보들도 있어 PropTypes는 적용하면 에러가 발생한다.(잠깐 비활성화)

부모 컴포넌트에서 Movie에게 넘겨줄 값들을 할당해야한다.

  <div>  //Movie 컴포넌트에 전달해주기!
            {movies.map((movie) =>
              <Movie
                key={movie.id}
                coverImg={movie.medium_cover_image}
                title={movie.title}
                summary={movie.summary}
                genres={movie.genres}
              />
            )}
</div>

 

2. App.js는 무비리스트를 보여줬지만 화면 전환을 위해 router를 보여줘야한다

ex) http://localhost:3000/movies/123123 => router는 123123에 해당하는 Movie Detail을 보여줄것이다.