⚛️React Training - section06 : Parameters

이번 포스팅에서는 router에서 url Paramerts를 전달하는 것에 관해서 포스팅 해볼 것이다. 우선 코드를 살펴보자.

SubApp.js

...

return (

    <BrowserRouter>

      <Routes>

        <Route path="/" element={<Home />}></Route>

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

...

 

Home.js

...

<div>

        {movies.map((movie) => (

          //movie 컴포넌트를 사용

          <Movie

            key={movie.id}

            id={movie.id} //id값을 전달

            cover_image={movie.medium_cover_image}

            title={movie.title}

            summary={movie.summary}

            genres={movie.genres}

          ></Movie>

        ))}

</div>

...

Movie.js

...

<h2>

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

</h2>

...

movie/:id로 router를 설정하고 해당 id는 Movie.js에서 props로 id값을 받게 설정을 한다. 해당 id값을 받아오는 곳은 Home.js로 부터 받아온다. 이를 통해서 movie API로 연결된 해당 영화의 고유 id값을 Movie.js의 Link를 통해서 Detail 컴포넌트로 전달한다. 그렇게 전달받은 id값은 Detail 내부 컴포넌트에서 다시 fetch를 통해서 정보를 추출한다. Detail 내부 컴포넌트는 아래와 같다.

import { useEffect } from "react";

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

export default function Detail() {

  const { id } = useParams();

  const getMovie = async () => {

    const json = await (

      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)

    ).json();

    console.log(json)

  };

  useEffect(() => {

    getMovie();

  }, [])

  return <h1>Detail</h1>;

}

여기서부터 우리가 살펴봐야 할 것은 useParams와 async/await이다. 참고로 'https://yts.mx/api/v2/movie_details.json?movie_id=${id}' API는 영화 세부정보를 보여 줄 수 있는 API이다.

useParams()

useParams()는 react훅으로 현재 url의 파라미터 값을 가져올 수 있게 해준다. 동적 라우트에서 url 파라미터 값을 추출한다.

async/await

async는 해당 함수가 비동기 함수임을 나타낸다. 이 함수 내에서 await 문법과 함께 사용해서 프로미스를 반환 할 수 있다.

await은 async 함수 내에서 비동기적으로 실행되는 프로미스의 결과를 기다리는 역할을 한다. 해당 문법을 사용해서 코드 실행이 일시적으로 중단되고, 해당 프로미스가 해결 또는 거부될 때까지 기다린 후에 결과를 반환한다.

이렇게 모든 수업을 마쳤다. 이후에는 이를 토대로 디테일한 영화 정보를 보여주는 코드를 작성하고 위의 fetch코드를 나만의 방식으로 변경해서 코드를 작성해 포스팅 할 것이다.