19. 간단한 영화 웹 서비스 만들기 14

이제 우리 페이지에 영화목록이 뜨고 있습니다.

우리의 컴포넌트를 업데이트 해야 합니다.

처음에는 데이터를 받아야 하고 두번째는 css를 해야 합니다.

일단 요소 검사를 해서 우리가 어떤 종류의 정보를 받고 있는지 살펴 보겠습니다.

그전에 우리가 필요한 것은 포스터, 제목, 장르, 평점, 설명입니다.

업데이트를 해보겠습니다.

제목의 경우 title_english 를 불러 오겠습니다.

포스터는 small_cover_image 를 불러 오겠습니다.

장르는 genres 를 불러 오겠습니다.

설명은 synopsis 를 불러 오겠습니다.

아래는 app.js 파일 중에 일부입니다.

_renderMovies = () => {

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

console.log(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 파일을 수정해줍니다.

기존 파일은 아래와 같습니다.

import React from 'react';

import PropTypes from 'prop-types';

import './Movie.css';

/*

class Movie extends Component {

static propTypes = {

title: PropTypes.string.isRequired,

poster: PropTypes.string.isRequired

}

render() {

return (

<div>

<MoviePoster poster={this.props.poster} />

<h1>{this.props.title}</h1>

</div>

)

}

}

*/

function Movie({title, poster}){

return(

<div>

<MoviePoster poster={poster} />

<h1>{title}</h1>

</div>

)

}

/*

class MoviePoster extends Component {

static propTypes = {

poster: PropTypes.string.isRequired

}

render(){

return (

<img src={this.props.poster} alt="Movie Poster" />

)

}

}

*/

function MoviePoster({poster}){

return(

<img src={poster} alt="Movie Poster" />

)

}

Movie.propTypes = {

title : PropTypes.string.isRequired,

poster : PropTypes.string.isRequired

}

MoviePoster.propTypes = {

poster : PropTypes.string.isRequired

}

export default Movie

아래와 같이 수정해줍니다.

prop types 다음에 장르, 시놉시스를 추가해줍니다.

import React from 'react';

import PropTypes from 'prop-types';

import './Movie.css';

/*

class Movie extends Component {

static propTypes = {

title: PropTypes.string.isRequired,

poster: PropTypes.string.isRequired

}

render() {

return (

<div>

<MoviePoster poster={this.props.poster} />

<h1>{this.props.title}</h1>

</div>

)

}

}

*/

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

return(

<div className="Movie">

<div className="Movie__Columns">

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

</div>

<div className="Movie__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>

)

}

/*

class MoviePoster extends Component {

static propTypes = {

poster: PropTypes.string.isRequired

}

render(){

return (

<img src={this.props.poster} alt="Movie Poster" />

)

}

}

*/

function MoviePoster({poster, alt}){

return(

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

)

}

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,

alt : PropTypes.string.isRequired

}

MovieGenre.propTypes = {

genre: PropTypes.string.isRequired

}

export default Movie

그외에도 이미지위에 마우스를 올려놓으면 타이틀이 보이게 추가하였습니다.

캡쳐를 못했지만 위와 같이 코딩을 완료하시고 마우스를 올려놓으면 제목이 출력되는 것을 

확인하실 수 있으실 겁니다.

이번시간에 코딩한 것을 복습해보겠습니다.

이번시간에는 장르와 시놉시스 같은 props를 더 추가하였습니다.

이전에는 포스터와 제목밖에 없었습니다.

props를 추가하고 체크할 수 있도록 proptype에 등록 했습니다.

그다음 베이직 html작업을 하였습니다. 

클래스명도 JSX로  추가하였습니다.

칼럼-무비포스터도 만들고, 제목도 만들었습니다. 장르 array를 맵핑하고

무비 시놉시스 클래스를 만들었습니다. 그리고 alt 이미지도 만들었습니다.

그래서 이미지의 제목이 뜨게 된 것입니다.

그리고 장르를 맵핑할 때 movie genre라는 새로운 functional 컴포넌트를 만들었습니다.

간단한 span을 return 하는 기능이었습니다.

이번시간은 여기까지하고 마치겠습니다. 고맙습니다.