[ReactJS] Parameters - ReactJS 로 영화 웹 서비스 만들기 (11)

 

사실상 ReactJS 강의의 마지막 이론 부분이다.

 

Parameter 를 이용해 movie 의 id 를 넘겨받아보자.

 

 

---

 

 

#7.6 Parameters

 

영화의 제목을 클릭하면 해당 영화의 정보 페이지로 넘어가도록 구현해보자.

그러기 위해서 영화의 id 를 주고받아야 함

 

 

React Router 는 동적인 url 을 생성할 수 있다.

여기서 동적 이라는 의미는 url 에 변수를 넣을 수 있다는 것.

 

동적 url 에서 Parameter 를 이용해 정보를 넘겨줄 수 있다.

 

이것을 이용해서 영화의 id 를 주고받을 것이다.

 

 

App.js

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/movie/:id">
          <Detail />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

 

Detail 컴포넌트 부분의 Route 를 보자.

"/movie/:id" 의 형태를 이용하면 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 컴포넌트에게 id 로 movie.id 넘겨주기

 

 

Movie.js

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>
    )
}

id 를 props 로 받아와서 <Link to={`/movie/${id}`}> 로 바꾸기

 

id: PropTypes.number.isRequired

 

id 의 propTypes 도 추가해줄 것.

 

 

Detail.js

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

const {id} = useParams();

 

 

useParams 를 이용하면 url 의 파라미터 값을 알 수 있음
=> url 의 상세정보를 알려줌

 

import { useEffect, useState } from "react";
import {useParams} from "react-router-dom";

function Detail() {
    const {id} = useParams();
    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);
    };
    useEffect(() => {
        getMovie();
    }, [])
    return (
        <h1>{movie.title}</h1>
    );
}

export default Detail;

 

useEffect

https://yts.mx/api/v2/movie_details.json?movie_id=${id} 링크를 fetch
따로 fetch 하는 함수 getMovie 를 async 로 만들어서 수행

 

movie state 를 만들어서 json.data.movie 값을 저장해주고

movie.title 을 출력하도록 했다.

 

 

결과

 

Jai Bhim 제목의 영화 클릭

 

영화 제목을 클릭하면 "/movie/:id" 형태의 url 로 이동하게 됨

 

 

movie.title 이 화면에 출력된다.

 

 

---

 

 

여기까지 실습 강의는 끝이고

앞으로는 내가 원하는대로 표현할 시간이다.

 

로딩을 추가하거나

Home, About 페이지 구현하기 등...

직접 코드 챌린지를 해볼 것이다.