영화 앱 만들기 -4-

이번엔 동적 URL을 적용 시켜 볼거다.

path="/movie/:id~" 같이 말이다.

그러기 위해선 먼저 Movie 컴퍼넌트에 id가 필요하겠지?

import PropTypes from "prop-types";
import { Link } from "react-router-dom";
function Movie({ coverImg, title, summary, genres }) {
  return (
    <div>
      <img src={coverImg} alt={title} />
      <h2>
        <Link to="/movie">{title}</Link>
      </h2>
      <p>{summary}</p>
      <ul>
        {genres.map((g) => (
          <li key={g}>{g}</li>
        ))}
      </ul>
    </div>
  );
}

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

export default Movie;

현재 Movie 컴퍼넌트는 id를 props로 받고있지 않아.
그러니까 부모요소 Home에서 id를 넘겨줘야해

 <Movie
              key={movie.id}
              id={movie.id}
              coverImg={movie.medium_cover_image}
              title={movie.title}
              summary={movie.summary}
              genres={movie.genres}
            />

자 이렇게 id={movie.id}를 추가해주고

다시 Movie로 넘어가서

function Movie({ id, coverImg, title, summary, genres })
.
.
.
      <h2>
        <Link to={"/movie/${id}"}>{title}</Link>
      </h2>

같이 수정해주자.

자 이제 주소창에 해당 영화 id가 출력되는게 보이지?

여기에 하나더 우리는 여기에오는 id가 뭔지 알아볼 수 있는 방법이 있어

useParam을 이용한 방법인데

우선 Detail 컴포넌트에

import { useParams } from "react-router-dom";

를 임포트 한뒤

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

저 Param 어디서 본것 같은데 잘 기억이 안난다.

아마 Parameter라는 뜻일것이다.

이어서 Detail페이지에 들어가서 콘솔을 키면 다음과 같이 정보가 넘어온다.

다음은 이 Detail페이지에

평점,개봉년,상영시간,장르,설명을 넣어주는게 챌린지로 있길래 다음과 같이 코드를 만들어봤다.

import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import Movie from "../components/Movie";

function Detail() {
  const { id } = useParams();

  const [loading, setLoading] = useState(true);
  const [movie, setMovie] = useState([]);

  const getMovie = async () => {
    const json = await (
      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
    ).json();
    setMovie(json.data.movie);
    setLoading(false);
  };
  useEffect(() => {
    getMovie();
  }, []);
  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <div>
          <h1>{movie.title}</h1>
          <div>
            <img src={movie.medium_cover_image} />
          </div>
          <div>
            rating: {movie.rating} | year:{movie.year} | runtime:{movie.runtime}
            | genres:{movie.genres.map((genres) => genres + ",")}
          </div>
          <h5>{movie.description_full}</h5>
        </div>
      )}
    </div>
  );
}
export default Detail;

css없이 만들어져서 굉장히 볼품 없다.