[React] Movie app clone coding : Updating Component

3 minute read
, , ,

7-1. Updating Component

정보확인 및 업데이트

요소 검사를 통해서 movie DB에서 어떤 종류의 정보를 받고 있는지 파악한다.

1// App.js
2_renderMovies = () => {
3  const movies = this.state.movies.map((movie, index) => {
4    console.log(movie)     // 정보를 프린트
5   ...
6}

Console에 받아오는 정보가 출력된 것을 확인할 수 있다. 받아오는 정보 중에 포스터, 제목, 장르, 평점, 설명 등이 필요하다.

  • 제목 : title-english
  • 포스터 : small_cover_image
  • 장르 : genres
  • 평점 : rating
  • 설명 : synopsis

받아오는 정보를 아래와 같이 수정한다.

 1// App.js
 2_renderMovies = () => {
 3  const movies = this.state.movies.map((movie, index) => {
 4    console.log(movie)
 5    return <Movie 
 6      title={movie.title_english} 
 7      poster={movie.medium_cover_image} 
 8      key={movie.id} 
 9      genres={movie.genres}
10      synopsis={movie.synopsis} 
11    />
12  })
13  return movies
14}

Movie component에 props를 업데이트 한다.

1// Movie.js
2Movie.propTypes = {
3  title: propTypes.string.isRequired,
4  poster: propTypes.string.isRequired,
5  genres: propTypes.array.isRequired,
6  synopsis: propTypes.string.isRequired
7}

HTML 꾸미기

 1// Movie.js
 2import React from 'react';
 3import propTypes from 'prop-types';
 4import './Movie.css';
 5
 6function Movie({title, poster, genres, synopsis}){
 7  return(
 8    <div className="Movie">
 9      <div className="Movie__Columns">
10        <MoviePoster poster={poster} alt={title} />  
11      </div>
12      <div className="Movie__Columns">
13        <h1>{title}</h1>
14        <div className="Movie__Genres">
15          {genres.map((genre, index) => <MovieGenre genre={genre} key={index} />)}
16        </div>
17        <p className="Movie__Synopsis">
18          {synopsis}
19        </p>
20
21      </div>
22    </div>
23  )
24}
25
26function MoviePoster({poster, alt}) {
27  return(
28    <img src={poster} alt={alt} title={alt} className="Movie__Poster" />
29  )
30}
31
32
33function MovieGenre({genre}){
34  return(
35    <span className="Movie__Genre">{genre}</span>
36  )
37}
38
39
40Movie.propTypes = {
41  title: propTypes.string.isRequired,
42  poster: propTypes.string.isRequired,
43  genres: propTypes.array.isRequired,
44  synopsis: propTypes.string.isRequired
45}
46
47MoviePoster.propTypes = {
48  poster: propTypes.string.isRequired,
49  alt: propTypes.string.isRequired
50}
51
52MovieGenre.prototype ={
53  genre: propTypes.string.isRequired
54}
55
56export default Movie;

 1// App.js
 2import React, { Component } from 'react';
 3import './App.css';
 4import Movie from './Movie';
 5
 6class App extends Component {
 7
 8  state = {}
 9
10  componentDidMount(){
11    this._getMovies();    // 큰 사이즈의 componentDidMount를 갖고 싶지 않으므로
12  }
13
14  _renderMovies = () => {
15    const movies = this.state.movies.map((movie, index) => {
16      return <Movie 
17        title={movie.title_english} 
18        poster={movie.medium_cover_image} 
19        key={movie.id} 
20        genres={movie.genres}
21        synopsis={movie.synopsis} 
22      />
23    })
24    return movies
25  }
26
27  _getMovies = async() => {
28    const movies = await this._callApi()
29    this.setState({
30      movies
31    })
32  }
33
34
35  _callApi = () => {
36    return fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating')
37    .then(response => response.json())
38    .then(json => json.data.movies)
39    .catch(err => console.log('error'))
40  }
41
42
43  render() {
44    return (
45      <div className="App">
46        {this.state.movies ? this._renderMovies() : 'Loading'}
47      </div>
48    );
49  }
50}
51
52export default App;