react-router-dom 설치하고 프로젝트 폴더 정리하기

'화면 이동'을 시켜주려면 '화면 이동을 시켜주는 장치'가 필요합니다. 그것이 바로 라우터입니다.

쉽게 말하면 라우터는 URL에 맞게 이동시켜주는 장치입니다.

 

react-router-dom 설치하기

npm install react-router-dom

 

 

components 폴더에 Movie 컴포넌트 옮기기

이제 컴포넌트를 역할에 맞게 분리해서 폴더에 담아 관리할 것입니다.

 

만약 VSCode에서 무언가를 업데이트하겠냐고 물어보는 창을 띄우면 <No>를 누릅니다.

 

routes 폴더에 라우터가 보여줄 화면 만들기

 

 

Home.js 파일에 작성할 구조는 App.js  파일의 코드를 그대로 복사하면 됩니다. Home.js 파일부터 수정해봅시다.

 

Home.js 수정하기

import axios from "axios";
import React from "react";
import Movie from "../components/Movie";
import "./Home.css";

class Home 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 (
      <section className="container">
        {isLoading ? (
          <div className="loader">
            <span className="loader__text">로딩 중...</span>
          </div>
        ) : (
          <div className="movies">
            {movies.map((movie) => (
              <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>
        )}
      </section>
    );
  }
}

export default Home;

 

Home.css  만들기

routes 폴더에 Home.css를 만든 다음 아래와 같이 입력합니다.

.container {
  height: 100%;
  display: flex;
  justify-content: center;
}

.loader {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 300;
}

.movies {
  display: grid;
  grid-template-columns: repeat(2, minmax(400px, 1fr));
  grid-gap: 100px;
  padding: 50px;
  width: 80%;
  padding-top: 70px;
}

@media screen and (max-width: 1090px) {
  .movies {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

 

App.js 수정하기

import React from "react";
import Home from "./routes/Home";
import "./App.css";

function App() {
  return <Home />;
}

export default App;

 

 

브라우저 폭에 맞게 영화 카드가 1줄 또는 2줄로 출력됩니다. 또한, 맨 위에 있는 영화 포스터 이미지가 잘리지 않게 바뀌었습니다.