나만의 코드 공방

코드로 놀고, 언어로 성장하는 공방.

프로그래밍 언어/REACT

Movie 컴포넌트 만들기

· 코딩마이데이

Movie 컴포넌트 만들기

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

const Movie = () => {
  return <div></div>;
};

Movie.propTypes = {};

export default Movie;

 

Movie 컴포넌트는 state가 필요하지 않으므로 클래스형 컴포넌트가 아니라 함수형 컴포넌트로 작성할 겁니다.

또, Movie에 넘어와야 하는 영화 데이터를 정의하고 관리하기 위해 prop-types를 사용했습니다.

 

Movie.propTypes 작성하기

우선 id, year, title, summary, poster를 각각 자료형에 주의하여 Movie.propTypes에 추가해봅시다.

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

const Movie = () => {
  return <div></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;

 

yts-proxy.now.sh/list_movies.json에 접속한 다음 스크롤을 조금만 내리면 medium_cover_image 키를 찾을 수 있습니다.

 

이 값을 사용하면 영화 포스터 이미지도 쉽게 출력할 수 있습니다.

 

노마드 코더 영화 API 정렬 기능 사용해보기

yts.lt/api#list_movies에 접속한 다음 EndPoint Prameters를 주목해 봅시다. sort_by라는 Parameter가 보일 것입니다.

 

Parameter의 이름에서 볼 수 있듯이 sort_by를 사용하면 영화 데이터를 정렬할 수 있습니다.

Example에는 quality가 3D인 영화만 불러오는 URL이 적혀있습니다.

Parameter(quality)와 Parameter에 넘겨줄 값(3D)을 =으로 이어서 작성하면 됩니다.

 

https://yts.mx/api/v2/list_movies.json?sort_by=rating을 접속해보면 평점 내림차순으로 영화 데이터를 보여줍니다.

 

 

axios.get() 수정하기

axios.get()에 yts-proxy.now.sh/list_movies.json?sort_by=rating을 전달합니다.

import axios from "axios";
import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = async () => {
    const {
      data: {
        data: { movies },
      },
    } = await axios.get(
      "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"
    );
    this.setState({ movies, isLoading: false });
  };
  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { isLoading } = this.state;

    return <div>{isLoading ? "로딩중..." : "우리는 준비 됐어"}</div>;
  }
}

export default App;

 

이제 평점 내림차순으로 영화 데이터를 가져올 수 있게 되었습니다.

 

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

Movie 컴포넌트에서 id, title, year, summary, poster props를 받아 출력할 수 있도록 수정합시다.

그리고 App 컴포넌트에서 Movie 컴포넌트를 그릴 때 title만 출력하도록 만들어봅시다.

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

const 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;

 

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

구조 분해 할당으로 this.state에 있는 movies를 얻은 다음, App 컴포넌트에서 우리는 준비됐어를 출력하고 있는 자리에 movies.map()을 사용합시다.

import axios from "axios";
import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = async () => {
    const {
      data: {
        data: { movies },
      },
    } = await axios.get(
      "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"
    );
    this.setState({ movies, isLoading: false });
  };
  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { isLoading, movies } = this.state;

    return <div>{isLoading ? "로딩중..." : movies.map()}</div>;
  }
}

export default App;

 

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

[Console] 탭을 영화 데이터를 출력한 다음, 아무것도 반환한지 않는 함수를 전달해 봅시다.

import axios from "axios";
import React from "react";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = async () => {
    const {
      data: {
        data: { movies },
      },
    } = await axios.get(
      "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"
    );
    this.setState({ movies, isLoading: false });
  };
  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { isLoading, movies } = this.state;

    return (
      <div>
        {isLoading
          ? "로딩중..."
          : movies.map((movie) => {
              console.log(movie);
              return;
            })}
      </div>
    );
  }
}

export default App;

 

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

import axios from "axios";
import React from "react";
import Movie from "./Movie";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = async () => {
    const {
      data: {
        data: { movies },
      },
    } = await axios.get(
      "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"
    );
    this.setState({ movies, isLoading: false });
  };
  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { isLoading, movies } = this.state;

    return (
      <div>
        {isLoading
          ? "로딩중..."
          : movies.map((movie) => {
              console.log(movie);
              return <Movie />;
            })}
      </div>
    );
  }
}

export default App;

 

Movie 컴포넌트에 props 전달하기

import axios from "axios";
import React from "react";
import Movie from "./Movie";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = async () => {
    const {
      data: {
        data: { movies },
      },
    } = await axios.get(
      "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"
    );
    this.setState({ movies, isLoading: false });
  };
  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { isLoading, movies } = this.state;

    return (
      <div>
        {isLoading
          ? "로딩중..."
          : 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}
                />
              );
            })}
      </div>
    );
  }
}

export default App;

 

[Console] 탭에서 영화 데이터 확인해보기

[Console] 탭을 보면 영화 정보가 평점 순으로 잘 들어오고 있는 것을 확인할 수 있습니다.

 

 

key props 추가하기

key props는 유일헤야 하므로 노마드 코더 영화 API에서 넘겨주는 id를 그대로 사용했습니다.

import axios from "axios";
import React from "react";
import Movie from "./Movie";

class App extends React.Component {
  state = {
    isLoading: true,
    movies: [],
  };
  getMovies = async () => {
    const {
      data: {
        data: { movies },
      },
    } = await axios.get(
      "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"
    );
    this.setState({ movies, isLoading: false });
  };
  componentDidMount() {
    this.getMovies();
  }

  render() {
    const { isLoading, movies } = this.state;

    return (
      <div>
        {isLoading
          ? "로딩중..."
          : 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>
    );
  }
}

export default App;

 

다시 영화 앱을 실행해보면 key props와 관련된 경고 메시지가 사라졌음을 확인할 수 있습니다.

'프로그래밍 언어 > REACT' 카테고리의 다른 글

영화 앱 멋지게 스타일링하기  (1) 2025.02.09
영화 앱 스타일링하기 - 기초  (0) 2025.02.07
영화 데이터 화면에 그리기  (0) 2025.02.05
영화 API 사용해 보기  (1) 2025.02.04
영화 앱 만들기 워밍업  (0) 2025.02.03

티스토리툴바