[React] 7-4. React로 영화 앱 만들기 (2) (Router 알아보기)

📌 React.js 앱에서 페이지 전환하기

🙂 목표: 영화 제목을 누르면 다른 페이지로 이동하게 만들 것이다.

1. 이전 시간에 작성한 코드를 깔끔해 보이도록 정리한다. (props 사용)

1-1.

component를 만들 수 있다는 React의 장점을 이용하여 loading이 끝났을 때 영화를 화면에 보여주는 부분은 따로 컴포넌트를 만들어 사용하도록 하였다.

Movie.js 파일을 새로 만들어 Movie 컴포넌트를 작성한다.

Movie component는 그냥 Movie라고 불리는 함수일 뿐이다.

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 component는 medium_cover_image 정보부터 genres 정보까지 parent component로부터 받아온다.

- Movie 컴포넌트로 옮겼기 때문에 div가 하나이므로 이전처럼 key를 작성해 줄 필요가 없다.

App 컴포넌트에서 위 코드가 있던 자리를 다음과 같이 수정한다.

.....
import Movie from "./Movie";
.....
function App() {
  .....
  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>
  );
}
.....

App 컴포넌트의 자식 컴포넌트로 Movie 컴포넌트를 적어주었다.

Movie component에 보낼 property 또한 적어주었다. map에 의해 같은 이름의 컴포넌트(Movie)가 여러 번 사용되기 때문에 Movie에도 key를 부여하였다.

결과는 이전과 똑같아야 한다.

1-2

위 코드에 적혀 있는 대로 prop를 전달해 줄 것이므로 props의 type을 정해야 한다. (proptypes 이용)

import PropTypes from "prop-types";
.....
Movie.propTypes = {
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
};
.....

- genres를 제외한 모든 props는 문자열인 string type이어야 한다.

- genres는 안의 요소들이 string type인 배열이므로 위와 같이 적었다.

- 위 4개의 props는 모두 필수적으로 요구되는 것들이므로 모두 isRequired를 적어주었다.

📍 React Router

2. React Router를 이용하여 페이지를 전환시켜 본다.

React Router의 역할: 페이지 전환

우리가 지금까지 만든 페이지는 '홈'에 해당한다.

예를 들어 현재 주소 localhost:3000에 movies/movies.id가 붙은 주소로 이동하고 싶다고 할 때, React Router를 사용하면 된다.

React Router를 설치하기 위해서는 터미널에 다음과 같이 입력해주어야 한다.

npm install react-router-dom

이제 우리는 스크린(라우트) 단위로 생각해야 한다.

우리는 Home route를 두고 그 곳에서 모든 영화를 보여줄 것이고, Movie route를 두고 그 곳에서 영화 하나를 보여줄 예정이다.

따라서 src 폴더에 routes와 component라는 새 폴더를 생성해 주고, Movie 파일은 component 폴더에 집어넣어 주어야 한다.

(Movie 컴포넌트는 ./components/Movie에서 가져오는 것으로 변경해야 한다.)

.....
import Movie from "./components/Movie";
.....

route 폴더에 홈 화면에 대한 코드가 들어 있는 Home.js 파일을 생성하고 Home 컴포넌트를 만들어 현재 App 컴포넌트에 있는 내용을 모두 옮긴다.

App 컴포넌트에서 이름만 Home으로 바꾸어 주었다고 생각하면 된다.

그리고 router 폴더의 영화 하나하나의 디테일을 담은 Detail.js 파일을 만들어 일단 다음과 같이 코드를 작성해 놓는다.

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

export default Detail;

App 컴포넌트는 다음과 같은 상태로 일단 깨끗하게 정리해 놓는다.

function App() {
  return null;
}

export default App;

이전에는 App 컴포넌트가 영화들을 화면에 보여주는 역할을 하였는데 이제 App 컴포넌트는 router를 render하는 역할을 한다.

router는 URL을 보고 있는 component이고 주소가 'http://localhost:3000/' 일 때는 router가 우리에게 Home component를 보여주게 될 것이다.

그리고 만약 주소를 'http://localhost:3000/movies/{id}' 형식의 주소로 바꾼다면 router는 우리에게 Detail component를 보여주게 될 것이다.

(해당 id와 일치하는 영화에 대한 detail을 보여주는 페이지)

즉, url에 따라서 우리는 Home을 보여주거나 Detail을 보여주거나 할 것이다.