[노마드 코더] React로 영화 앱 만들기3

이제, id를 사용해서 어떤 영화의 상세페이지로 들어가게 해주는지 설정해줄거임

url 에는 변수를 사용해줄 수 있는데, :id 이런 식으로 앞에

: 를 붙히면 된답니당.

App.js

              <Route path="/movie/:id" element={<Detail />} />

이렇게 되면, Movie 컴포넌트에 id가 필요하게 된다는 것을 알 수 있듬.

하지만 우리 Movie 컴포넌트를 확인해보면

Movie.jsx

function Movie({coverImg, title, summary, genres}){

id 를 props 로 받고 있지 않다는 걸 알 수 있습다.

Home.jsx 로 가서

Home.jsx

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

id 도 props 로 보내줍니다요

저장하고 다시 Movie.jsx로 고고

Movie.jsx

function Movie({id, coverImg, title, summary, genres}){

id를 받아와주고

   Movie.propTypes = {
        id : PropTypes.number.isRequired,

PropTypes 도 작성해줍시당. id는 숫자형입니당.

그리고 Link 를 수정해줄게용

            <h2><Link to={`/movie/${id}`}>{title}</Link></h2>

이렇게 하고 다시 제목을 클릭하고 url 을 확인하면?

뒤에 아이디가 같이 나오게됩니당!

이제 여기에 오는 id 값이 무슨 영화인지를 알아내야합니당

그래야지 이 id 를 가진 영화의 api data 를 가져올 수 있기 때문임다.

일단 Detail.jsx로 가서 새로운 react-router-dom 에서 주는 함수를 사용할것임.

Detail.jsx

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

 

useParams 라는 함수를 import 해줄거에요

그리고 밑에서

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

이렇게 사용해주고, 결과를 보면

이렇게 id 는 "46035"

라고 알려줍니다!!

이 함수는 Route path 에 작성한 :id(변수) 의 값을 넘겨줍니다.

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

이렇게 작성해주면 저희가 적었던 변수 id 의 값만 갖고와집니다.

이렇겡

이제 api 에게 이 아이디를 가지고 요청만 하면 될것같네용?

    const getMovie = async () =>{
        const json = await (await (await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)).json());
        console.log(json)
    }
    useEffect(() => {
        getMovie();
    }, [])

url 은 detail 을 갖고오는 api url 이고 뒤에 movie_id=${id} 를 붙여주면

이 아이디를 가지고 있는 상세 정보를 가져올 수 있게 됩니당.

그리고 콘솔로그를 보면?

아주 잘 가져와집니다

다음은 상세페이지에 정보를 넣는 걸 혼자 해볼 생각입니더..^^