16 - 영화 앱 만들기(3)

1. Movies 컴포넌트 만들기

 

- Movie 컴포넌트 만들기

src 폴더에 Movie.js 파일 생성.

코드 블록처럼 입력해준다.

import React from 'react';
import PropTypes from 'prop-types';

function Movie() {
  return <h1></h1>;
}

Movie.propTypes = {};

export default Movie;

Movie 컴포넌트는 state 필요 없다.

클래스형 컴포넌트가 아닌 함수형 컴포넌트로 작성한다.

 

 

- 영화 데이터 다시 살펴보기

yts-proxy.now.sh/list_movies.json 에 접속해서 데이터 다시 보자.

id, title, rating 등등 가져오자.

 

 

- Movie.propTypes 작성하기

코드 블럭과 같이 입력해주자.

import React from 'react';
import PropTypes from 'prop-types';

function Movie() {
  return <h1></h1>;
}

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;

마지막 poster props 는 영화 이미지 주소를 저장할 곳.

 

 

- 이미지 키와 키값 확인하기

yts-proxy.now.sh/list_movies.json

다시 사이트 접속해서 스크롤을 내려서 medium_cover_image 확인.

해당 주소값을 이용하면 이미지 출력 가능.

해당 사이트에선 props 이름을 medium... 이라고 했지만,

작업 중인 이름은 이해하기 쉽도록 poster로 지정했다.

 

여기까지 Movie에 필요한 prop-types 추가 완료.

 

 

- 영화 API 정렬 기능 사용

yts.lt/api#list_movies 접속한다.

parameter에 있는 sort_by 를 사용하면 정렬 가능하다.

사용법은 아래쪽 Examples 을 보면 된다.

Examples에는 quality가 3D인 영화만 불러오는 URL이다. quality=3D

 

 

- 평점 내림차순 데이터 보기

yts-proxy.now.sh/list_movies.json?sort_by=rating 접속한다.

rating 숫자를 확인하면서 스크롤을 내리면 내림 차순인 것을 확인할 수 있다.

9.9  9.4  9.~~ 으로 확인 가능할 것이다.

 

 

-axios.get() 수정하기

새로운 URL을 써야 하니 axios.get()에 있는 주소를 수정하자.

App.js 를 본다.

yts.mx/api/v2/list_movies.json?sort_by=rating 로 수정해 준다.

    } = await axios.get("https://yts.mx/api/v2/list_movies.json?sort_by=rating");
    this.setState({ movies, isLoading: false });
  }

 

이제 App컴포넌트에서 Movie 컴포넌트로 id, title, year, summary, poster props를 넘겨주면 된다.

 

 

- Movie 컴포넌트에 props 추가하고 출력하기

Movie.js 로 간다.

코드 블록처럼 입력하자.

import React from 'react';
import PropTypes from 'prop-types';

function Movie({ id, title, year, summary, poster}) {
  return <h4>{title}</h4>;
}

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;

Movie() 함수의 인자들을 넣어주자.

일단 title만 출력되도록 한다.

App 컴포넌트에서 Movie 컴포넌트를 그리면 title이 출력되도록 만든다.

 

 

- App 컴포넌트에서 Movie 컴포넌트 그리기

App.js 로 간다.

구조 분해 할당으로 this.state에 있는 movies 얻자.

다음 App 컴포넌트에서 we are ready 출력하고 있는 자리에 movies.map() 사용.

  render() {
    const { isLoading, movies } = this.state;
    return <div>{isLoading ? 'Loading...' : movies.map()}</div>;
  }
}

const {..., movies} 추가했고, 'We are ready' 를 지우고 거기에 movies.map() 을 추가함.

 

 

- map() 함수에 컴포넌트를 반환하는 함수 전달하기

우선 console 탭에 영화 데이터를 출력한 다음,

아무것도 반환하지 않는 함수를 전달하자.

  render() {
    const { isLoading, movies } = this.state;
    return (
      <div>
        {isLoading 
          ? 'Loading...'
          : movies.map((movie) => {
            console.log(movie);
            return; //여기서 Movie 컴포넌트 반환한다.
          })}
      </div>
    );
  }
}

 

 

- Movie 컴포넌트 반환하도록 movies.map() 수정

Movie 컴포넌트를 임포트 한다.

movies.map()에 전달한 함수가 <Movie /> 반환토록 한다.

App.js를 보자

import React from 'react';
import axios from 'axios';
import Movie from './Movie'; //Movie 컴포넌트 임포트

class App extends React.Component {
.
.
.
  render() {
    const { isLoading, movies } = this.state;
    return (
      <div>
        {isLoading 
          ? 'Loading...'
          : movies.map((movie) => {
            console.log(movie);
            return <Movie />;  //여기서 Movie 컴포넌트 출력
          })}

 

 

- Movie 컴포넌트에 props 전달하기

앞서 Movie 컴포넌트에서 id, year, title..... 를 isRequired로 설정했기 때문에

설정한 props 모두 전달해야 함.

대부분 props는 노마드 코더 API에서 받아온 키와 같지만,

poster props는 키 이름이 medium_co.... 이므로, movies.poster가 아닌

movies.medium_cover_imate 로 작성한다.

 

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

앱을 실행해서 영화 제목과 console 탭에서 평점 순으로 나오는지 확인하자.

object▶ 을 눌러보면 rating도 순서대로 나온다.

 

console 탭에 경고 메시지도 있을 것이다.

 

 

- key props 추가

코드를 수정해서 key props 문제를 해결하자.

일단 console.log()는 지워준다.

id위에 key를 추가하자.

  : movies.map((movie) => {
    return (
      <Movie
        key={movie.id}   // key props 추가함
        id={movie.id}
        year={movie.year}
        title={movie.title}
        summary={movie.summary}
        poster={movie.medium_cover_image}
/>
);

그럼 경고 메시지가 지워진다.

 

---

지금 까지 종합

 

1. 영화 데이터는 axios.get() 함수 사용.
2. axios.get()은 시간이 필요한 함수로 async와 await 사용.
3. state에 영화 데이터 저장 시 Loading을 보여주던 화면을 Movie 컴포넌트를 보여주도록 만듦.

 

다음에는 앱을 꾸미고 나머지 props도 출력한다.