[React] ReactJS로 영화 웹 서비스 만들기 #7.6

📍 Parameters

📏 페이지 전환

( Home ) 영화 제목 클릭 -> ( Detail ) 영화 정보 페이지

React Router 는 동적 URL 을 지원해주기도함
동적? -> URL에 변수 넣을 수 있음!

• id 부분에 "/movie/:id" 형태로 변수 넣기 가능

// App.js
<Router>
      <Switch>
        <Route path="/movie/:id">
          <Detail />
        </Route>

• Movie 가 props로 id를 받도록 Home.js 에서 id 추가
• Movie 가 Home 으로 부터 id 를 받음

// Home.js
return (
    <div>
    {
        loading ?
        <h1>Loading...</h1>
        :
        movies.map((movie) => (
            <Movie
            key={movie.id}
            id={movie.id}
            coverImg={movie.medium_cover_image}
            title={movie.title}
            summary={movie.summary}
            genres={movie.genres}
            />
        ))
    }
    </div>
);

// Movie.js
// id 를 받을 수 있음
function Movie({ id, coverImg, title, summary, genres }) {
  ...
  return (
        <div>
            <img src={coverImg} alt={title} />
            <h2>
              <Link to={`/movie/${id}`}>{title}</Link>
            </h2>
            <p>{summary}</p>
            <ul>
              {genres.map((g) => (
                <li key={g}>{g}</li>
              ))}
            </ul>
          </div>
    )
}

📏 URL - 아이디 가져오기

url 에 있는 영화별 아이디를 어떻게 가져올 수 있을까?
React Router 에서는 url 에 있는 값을 반환해주는 함수 useParams 사용

// Detail.js 추가
import { useParams } from "react-router-dom";

function Detail() {
  	...
    const {id} = useParams();
    return (
        <h1>Detail</h1>
    );
}

---

📚 노마드 코더 <ReactJS로 영화 웹 서비스 만들기>
👩‍💻 참고