# 4.3. Adding Genres

이 글은, 노마드코더의 "ReactJS로 영화 웹 서비스 만들기"를 공부한 내용을 수강자 입장에서 필기한 것으로, 
다소 불친절한 설명이 있을 수 있음을 미리 알립니다.

1. Movie.js 에서 function Movie의 파라미터 추가

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

2. Movie.proptypes에서 genre 추가

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,
};

참고 arrayOf(PropTypes.certainType)

// An array of a certain type
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

3. App.js에서 render()함수의 genre 추가

render() {
    const { isLoading, movies } = this.state;
    return (
      <section className="container">
        {isLoading ? (
          <div className="loader">
            <span className="loader__text">Loading..</span>
          </div>
        ) : (
          <div className="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>
        )}
      </section>
    );
  }

4. className 에러

• javascript에는 class가 있기 때문에 오류가 발생. <div class ...를 <div className...으로 변환해주면 해결

5. Movie function의 <ul>.. genre 추가

function Movie({ year, title, summary, poster, genres }) {
  return (
    <div className="movies__movie">
      <img src={poster} alt={title} title={title} />
      <div className="movie__data">
        <h3 className="movie__title">{title}</h3>
        <h5 className="movie__year">{year}</h5>
        <p className="movie__summary">{summary}</p>
        <ul className="genres">
          {genres.map((genre) => (
            <li className="genres__genre">{genre}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

6. map의 item은 각각 key가 필요함. map function에서는 각 item에 index number을 제공.

• 이 index를 이용해서 list 안에 key tag를 추가.

<ul className="genres">
          {genres.map((genre, index) => (
            <li key={index} className="genres__genre">{genre}</li>
          ))}
        </ul>