[movie_app_7] css

props를 몇개 더 추가한다.

[App.js]

_renderMovies = () => {

const movies = this.state.movies.map(movie => {

return <Movie

title={movie.title_english}

poster={movie.medium_cover_image}

key={movie.id}

genres={movie.genres}

synopsis={movie.synopsis}

/>

})

return movies;

}

[Movie.js]

function Movie({poster,title,genres,synopsis}){

return(

<div className="Movie">

<div className="Movie__Columns">

<MoviePoster poster={poster} alt={title}/>

</div>

<div className="Moive__Columns">

<h1> {title} </h1>

<div className="Movie__Genres">

{genres.map((genre, index) => <MovieGenre genre={genre} key={index}/>)}

</div>

<p className="Movie__Synopsis">

{synopsis}

</p>

</div>

</div>

)

}

function MoviePoster({poster, alt}){

return (

<img src={poster} alt={alt} title={alt} className="Movie__Poster"></img>

)

}

function MovieGenre({genre}){

return(

<span className="Movie__Genre">{genre} </span>

)

}

Movie.propTypes = {

title: PropTypes.string.isRequired,

poster: PropTypes.string.isRequired,

genres: PropTypes.array.isRequired,

synopsis: PropTypes.string.isRequired

}

MoviePoster.propTypes = {

poster: PropTypes.string.isRequired

}

MovieGenre.propTypes = {

genre: PropTypes.string.isRequired

}

css는 여기서 참고

https://github.com/nomadcoders/movie_app