[노마드코더/ReactJS로 영화 웹 서비스 만들기]4.3 Adding Genres

4.3 Adding Genres

genres를 props에 포함시키기

• <Movie.js>에서 할 일
  • Movie.propTypes에 genres:PropTypes.arrayOf(PropTypes.string).isRequired}; 포함시키기
  • function Movie 인자로 genres 포함시키기
• <App.js>에서 할 일
  • value 설정 -> genres={movie.genres}
• HTML에서는 태그 내 class는 class로 사용해도 되지만 Javascript는 component class와 혼란스러워해서 태그 내 class는 className으로 사용

genres 디자인하기

 <ul className="genres">
                    {genres.map(genre=>(
                        <li className="genres_genre">{genre}</li> 
                    ))}
                </ul>

Warning: Each child in a list should have a unique "key" prop. 에러뜸

• map 에 있는 각 item은 key가 필요하기 때문
• map fuction은 2개의 argument 가짐
• ex) {genres.map((genre,index)=>( ))}
  • argument 이름은 무관
  1. genre: 현재의 item
  2. index: item number -> 이 item number를 key로 적용

최종

function Movie({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="genres">
                    {genres.map((genre,index)=>(
                        <li key={index} className="genres_genre">{genre}</li> 
                    ))}
                </ul>
                <p className="movie_summary">{summary}</p>
            </div>

        </div>);
}