영화 상세 정보 기능 만들어 보기

route props란 라우팅 대상이 되는 컴포넌트에 넘겨주는 기본 props를 말합니다. 다시 말하자면 우리가 직접 넘겨주지 않아도 기본으로 넘어가는 route props라는 것이 있습니다.

 

route props 살펴보기

우선 console.log()를 통해 About으로 어떤 props가 넘어오는지 살펴봅시다.

import React from "react";
import "./About.css";

function About(props) {
  console.log(props);
  return (
    <div className="about__container">
      <span>
        "Freedom is th freedom to say that two plus two make four. If that is
        granted, all else follows."
      </span>
      <span>--George Orwell, 1984</span>
    </div>
  );
}

export default About;

 

대해서로 이동하면 [Console] 탭에 {history: {...}, Location: {...}, match: {...}, staticContext: undefined}가 보일 것입니다. 이게 바로 react-router-dom에서 Route 컴포넌트가 그려줄 컴포넌트에 전달한 props입니다.

우리가 주목해야 할 점은 Route 컴포넌트가 그려줄 컴포넌트에는 항상 이 props가 전달되고, 이 props에 우리 마음대로 데이터를 담아 보낼줄 수 있다는 사실입니다.

 

route props에 데이터 담아 보내기

react props에 데이터를 담아 보내려면 Navigation 컴포넌트에 있는 Link 컴포넌트의 to props의 구조를 조금 바꿔야합니다. 아래와 같이 Navigation 컴포넌트 /about으로 보내주는 Link 컴포넌트와 to props를 수정해봅시다.

import React from "react";
import { Link } from "react-router-dom";
import "./Navigation.css";

function Navigation() {
  return (
    <div className="nav">
      <Link to="/">홈</Link>
      <Link to={{ pathname: "/about", state: { fromNavigation: true } }}>
        대해서
      </Link>
    </div>
  );
}

export default Navigation;

 

pathname은 URL을 의미하고, state는 우리가 route props에 보내줄 데이터를 의미합니다.

 

route props 다시 살펴보기

/about으로 이동한 다음 [console] 탭에서 [location]을 펼처봅시다. 그러면 state 키에 우리가 보내준 데이터를 확인할 수 있을 것입니다.

 

Navigation 컴포넌트 정리하기

Navigation 컴포넌트를 원래대로 돌려 놓습니다.

import React from "react";
import { Link } from "react-router-dom";
import "./Navigation.css";

function Navigation() {
  return (
    <div className="nav">
      <Link to="/">홈</Link>
      <Link to="/about">대해서</Link>
    </div>
  );
}

export default Navigation;

 

Movie 컴포넌트에 Link 컴포넌트 추가하기

Movie 컴포넌트에 Link 컴포넌트를 입포트하고, Link 컴포넌트에 to props를 작성하면 됩니다.

import React from "react";
import PropTypes from "prop-types";
import "./Movie.css";
import { Link } from "react-router-dom";

const Movie = ({ title, year, summary, poster, genres }) => {
  return (
    <div className="movie">
      <Link
        to={{
          pathname: "/movie-detail",
          state: { year, title, summary, poster, genres },
        }}
      >
        <img src={poster} alt={title} title={title} />
        <div className="movie__data">
          <h3 className="movie__title">{title}</h3>
          <h5 className="movie__year">{year}</h5>
          <ul className="movie__genres">
            {genres.map((genre, index) => {
              return (
                <li key={index} className="movie__genre">
                  {genre}
                </li>
              );
            })}
          </ul>
          <p className="movie_summary">{summary.slice(0, 180)}...</p>
        </div>
      </Link>
    </div>
  );
};

Movie.propTypes = {
  year: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  poster: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string.isRequired),
};

export default Movie;

 

 

 

 

이제 영화 카드를 누르면 /movie-detail로 이동하게 될 것입니다. 그러면 /movie-detail로 이동했을 때 보여줄 화면이 필요합니다.

 

Detail 컴포넌트 만들기

Detail 컴포넌트를 routes 폴더에 추가합니다. 그리고 Detail 컴포넌트에서 Movie 컴포넌트의 Link 컴포넌트가 보내준 영화 데이터(state: {year, title, summary, poster, genres })를 확인해 볼 수 있도록 console.log()도 작성합시다.

import React from "react";

function Detail(props) {
  console.log(props);
  return <div>hello</div>;
}

export default Detail;

 

 

Route 컴포넌트 추가하기

App.js를 연 다음 Detail 컴포넌트를 임포트하고 Route 컴포넌트에서 Detail 컴포넌트를 그려주도록 코드를 작성합시다.

import React from "react";
import "./App.css";
import { HashRouter, Route, Routes } from "react-router-dom";
import About from "./routes/About";
import Home from "./routes/Home";
import Navigation from "./components/Navigation";
import Detail from "./routes/Detail";

function App() {
  return (
    <HashRouter>
      <Navigation />
      <Routes>
        <Route path="/" exact={true} Component={Home} />
        <Route path="/about" Component={About} />
        <Route path="/movie-detail" Component={Detail} />
      </Routes>
    </HashRouter>
  );
}

export default App;

 

 

영화 코드를 눌러 /movie-detail로 이동한 다음 영화 데이터 확인하기

영화 카드를 눌러 /movie-detail로 이동해봅시다. 화면을 보면 Detail 컴포넌트가 출력하고 있는 hello라는 문장이 보일 것입니다.

 

 

/movie-detail로 바로 이동하기

URL에 /movie-detail을 입력해서 바로 이동해봅시다.

 

Detail 컴포넌트의 hello는 잘 출력하고 있지만 [Console] 탭에는 영화 데이터가 없습니다(state가 undefined). Detail 컴포넌트로 영화 데이터가 넘어오지 못한 것입니다.