[React] 노마드코더 영화 웹 서비스 만들기(3) - Rendering

Rendering

 

 

Movies.data.data.movies로 영화 데이터 목록들을 확인한다.

 

 

 

es6를 사용해 이렇게 단축시킬 수 있다.

 

getMovies = async() => {
  const {data : {data : {movies}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json");
  console.log(movies);
}

 

 

이제 이 movies를 state안에 넣어야 한다.

 

this.setState({movies : movies});

를 최신버전 자바스크립트를 사용해 이렇게 짧게 표현한다.

getMovies = async() => {
  const {data : {data : {movies}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json");
  this.setState({ movies });
}

 

 

 

setState로 state에 있는 상태 isLoading도 "ready"로 바꾼다.

getMovies = async() => {
  const {data : {data : {movies}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json");
  this.setState({ movies, isLoading=false });
}

 

 

 

이제 Movie.js 파일을 만든다.

 

여기선 실제로 movie를 render한다.

 

 

movie 컴포넌트는 state를 필요로 하지 않기 때문에 클래스 컴포넌트를 만들 필요는 없다.

함수 컴포넌트를 만든다.

 

 

 

import React from "react"
import propTypes from "prop-types"

function Movie({id, year, title, summary, poster}) {

}

Movie.propTypes = {
  id: propTypes.number.isRequired,
  year: propTypes.number.isRequired,
  title: propTypes.string.isRequired,
  summary: propTypes.string.isRequired,
  poster: propTypes.string.isRequired,
}

export default Movie;

 

json파일에서 영화 정보들을 가져온다.

 

이제 이것을 render해야 하기 때문에 App.js로 돌아 온다.

 

 

import Movie from "./Movie";

render() {
  const { isLoading, movies } = this.state;
  return (
    <div>
      {isLoading
        ? "Loading.."
        : movies.map((movie) => {
            return (
              <Movie
                key={movie.id}
                id={movie.id}
                year={movie.year}
                title={movie.title}
                summary={movie.summary}
                poster={movie.medium_cover_image}
              />
            );
          })}
    </div>
  );
}

 

 

Movie를 import하고 Movie 컴포넌트에 Props로 정보들을 넣는다.

이 때  key prop을 넣지 않으면 에러가 뜨므로 고유한 값인 id를 사용해 key prop를 꼭 추가해주자.

 

 

Styling하기 

 

HTML과 CSS로 스타일링을 해준다.

 

react에서는 css를 위한 클래스를 지정할 때 class가 아니라 className을 사용한다.

 

 

 

Movie.js

import React from "react";
import propTypes from "prop-types";

function Movie({ id, year, title, summary, poster }) {
  return (
    <div className="movie_list">
      <div className="movie_poster">
        <img src="{poster}" alt="{title}"/>
      </div>
      <h3 className="movie_title">{title}</h3>
      <h5 className="movie_year">{year}</h5>
      <p className="movie_summary">{summary}</p>
    </div>
  );
}

Movie.propTypes = {
  id: propTypes.number.isRequired,
  year: propTypes.number.isRequired,
  title: propTypes.string.isRequired,
  summary: propTypes.string.isRequired,
  poster: propTypes.string.isRequired,
};

export default Movie;

 

 

 

마지막으로  App.css 파일을 작성해 App.js에서 import한다.

 

 

 

 

 

 

+Props에 Array 추가하기

 

 

json파일을 보면 genres가 array로 되어있는 것을 볼 수 있다.

 

 

 

import React from "react";
import propTypes from "prop-types";
import "./Movie.css";

function Movie({ id, year, title, summary, poster, genres }) {
  return (
    <div className="movie_list">
      <div className="movie_poster">
        <img src={poster} alt={title} />
      </div>
      <div className="movie_contents">
        <h3 className="movie_title">{title}</h3>
        <h5 className="movie_year">{year}</h5>
        <ul className="movie_genres">
        {genres.map((genre, index) => (
          <li key={index} className= "genres__genre">{genre}</li>
           ))}
         </ul>
        <p className="movie_summary">{summary}</p>
      </div>
    </div>
  );
}

Movie.propTypes = {
  id: propTypes.number.isRequired,
  year: propTypes.number.isRequired,
  title: propTypes.string.isRequired,
  summary: propTypes.string.isRequired,
  poster: propTypes.string.isRequired,
  genres: propTypes.array.isRequired
};

export default Movie;

 

 

이때, genre 배열의 아이템들은 각각 고유한 키 값이 필요하기 때문에 

map함수의 또다른 argument인 index를 키 prop으로 넣는다.

 

 

 

 

 

<div className="movies_container">
  {movies.map((movie) => {
    return (
      <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>;

 

App.js에 props에도 추가해준다.