7.4 Movie App part Two

자 그럼 페이지 전환하는 방법을 배워보자.

 

먼저 컴포넌트를 사용해 코드를 좀 정리하자~!

Movie.js 컴포넌트를 만들고, 각 항목들은 prop으로 받아보자~!

자 그럼 App.js로 와서 movie를 렌더하자

우선 prop 이름은 변경되어도 되니 아래와 같이 바꿔주자.

잘 출력이 되지만 계속 경고가나는데 img에는 alt처리를 해주면된다~!

그리고 다음의 에러는

다음과 같이 key를 주면된다.

App.js

import { useEffect, useState } from "react";
import Movie from "./Movie";

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    const json = await (
      await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year `
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <div>
          {movies.map((movie) => (
            <Movie
              key={movie.id}
              coverImg={movie.medium_cover_image}
              title={movie.title}
              summary={movie.summary}
              genres={movie.genres}
            />
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

Movie.js

function Movie({ coverImg, title, summary, genres }) {
  return (
    <div>
      <img src={coverImg} alt={title} />
      <h2>{title}</h2>
      <p>{summary}</p>
      <ul>
        {genres.map((g) => (
          <li key={g}>{g}</li>
        ))}
      </ul>
    </div>
  );
}
export default Movie;

 

자 그럼 우리가 어떤 props를 가지고 있는지 알아보자.

Movie컴포넌트의 Proptypes를 설정해보자.

 

 

 

 

자 그럼 React Router(Page 전환)에 대해 배워보자.

다음의 명령어를 통해 한번 진행해보자.

npm install react-router-dom

routes, components라는 폴더를 새로 만들어보자~!

 

그럼 Movie.js를 components안에 넣고, App.js안에 있는 Movie의 경로도 바꿔보자.

그리고 routes안에는 Home.js를 만들고

Home은 기본적으로 App컴포넌트 전체를 가지고 있게 되도록 할것이다.

그래서App.js는 router를 render하도록 할것이다.

Detail.js와 Home.js을 보여주도록 할것이다.

 

App.js

function App() {
  return null;
}

export default App;

routes/Home.js

import { useEffect, useState } from "react";
import Movie from "../components/Movie";

function Home() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    const json = await (
      await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year `
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <div>
          {movies.map((movie) => (
            <Movie
              key={movie.id}
              coverImg={movie.medium_cover_image}
              title={movie.title}
              summary={movie.summary}
              genres={movie.genres}
            />
          ))}
        </div>
      )}
    </div>
  );
}
export default Home;

routes/Detail.js

function Detail() {
  return <h1>Detail</h1>;
}
export default Detail;

components/Movie.js

import PropTypes from "prop-types";

function Movie({ coverImg, title, summary, genres }) {
  return (
    <div>
      <img src={coverImg} alt={title} />
      <h2>{title}</h2>
      <p>{summary}</p>
      <ul>
        {genres.map((g) => (
          <li key={g}>{g}</li>
        ))}
      </ul>
    </div>
  );
}

Movie.propTypes = {
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
};
export default Movie;