#4.3 Adding Genres

#4.3 Adding Genres

이번시간에는 영화의 장르를 추가해볼 것이다.

 

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

};

✅Movie.js

다음과 같이 Movie.propTypes에 genres 도 추가해준다.

 

<div class="movies">

          {movies.map((movie) => (

             <Movie

             key={movie.id}

             id={movie.id}

             year={movie.year}

             title={movie.title}

             summary={movie.summary}

             poster={movie.medium_cover_image}

             genres={movie.genres}

           />

          ))}

        </div>

✅ App.js

그리고 App.js의 render 부분에서 genres를 props에 추가해준다.

 

🍨 JSX에서 HTML 부분의 class → className으로 바꾸기

class 오류: 우리가 html 부분에서 나중에 css 작업을 위해서 class로 지정해주었던 것 때문에 콘솔에서 확인해보면 오류가 날 수도 있다. 그런 경우 자바스크립트에서 클래스 컴포넌트의 'class'와 혼란스러워하기 때문에 그 경우 태그 안에 class는 className이라고 써줘야 한다고 한다. (HTML처럼 보여도 사실 JSX 이기 때문)

 

function Movie({id, year, title, summary, poster, genres}){

    return (

        <div className="movie">

            <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}</p>

            </div>

        </div>

    )

};

✅ Movie.js

장르들을 map을 이용하면 된다.  이 때, genres는 배열이기 때문에 key를 또 지정해줘야 하는데, 이 때에는 map에서 실행되는 콜백함수의 두번째 인자로 index를 key값으로 주면 된다.

 

이렇게 하면 장르까지 잘 보이고, 이제 css를 할 시간이다.