[react] 노마드코더 영화웹서비스 제작 4.3 장르 더하기

다른 props들과 다르게 genres는 배열로 이루어져있다. 한 드라마가 로맨스 스릴러이듯..
첫번째 영화인 "Potter's Ground"의 장르는 아래와 같다.
genres: ["Action","Drama","Thriller","Western"]
때문에 genres는 ul태그로 각각의 genre, genre,..는 li태그로 감싸주려한다.
자세한 방법은 아래에

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

모양새가 지난번에 movies 데이터에 map을 달아서 안에 있는 props에 돌아가면서 넣어주던 거랑 비슷하다.

//APP COMPONENT 중 render()의 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>

차이가 있다면, <App />에는 key 프로퍼티가 필요하대서 id 데이터를 id 프로퍼티랑 나눠썼는데, <Movie />도 key 프로퍼티가 필요하다고 뜨는 것이다.
여기서 니꼬가 알려준 것이 map에서 array를 만들어낼 때, index도 같이 제공해준다는 거다.
이 index를 key={ }안에 채워넣었다.