동적 라우팅 Path Parameter

실제 Watch Pedia 사이트를 보면 각각의 영화 목록을 클릭하면 해당 영화의 상세페이지가 열린다.

메인 페이지와 상세 페이지의 주소는 다르다.

영화마다 상세페이지 주소 또한 다르다. 만약 영화가 10000개가 있다면, Router.js에 10000줄을 작성해야 할까?

<Route path="/detail/위대한개츠비" element={<Detail />} />
<Route path="/detail/서편제" element={<Detail />} />
<Route path="/detail/키다리 아저씨" element={<Detail />} /> 
<Route path="/detail/로보트 킹" element={<Detail />} />
<Route path="/detail/로마의 휴일" element={<Detail />} />
<Route path="/detail/사이코" element={<Detail />} /> 
//영화가 1억개 이상이라면...? 이렇게 작성해서 될까?

💡 동적 라우팅

라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것을 동적 라우팅 이라고 한다!
동적라우팅에 대한 자세한 설명은 따로 게시글을 올릴 예정입니다!

---

💡 Path Parameter?

localhost:3000/product/2
localhost:3000/product/45
localhost:3000/product/125

위 예시에서 라우트 경로 끝에 들어가는 각기 다른 id 값들이 들어간다. 2, 45, 125 . url 경로에서 달라지는 부분을 저장하는 매개 변수를 Path Parameter 라고 한다.

Path Parameter 는 Router 컴포넌트에서 다음과 같이 정의된다!

⛳ Path Parameter를 사용해서 영화의 id값 넘겨주기( feat. Link or UseNavigate )

메인 페이지를 구현하고 각각 영화 목록을 클릭했을 때, 해당 영화의 상세 페이지로 넘어갈 수 있게 <Link/>태그를 작성했다.

<Link /> 태그의 어디로 이동할지 명시하는 to속성에 어떻게 작성하며 Router.js에는 어떤 방식으로 Path Parameter를 정의했는지 알아보자

우선 영화의 상세페이지는 다른 팀원이 구현하고 있었으며 나는 그 팀원에게 <Link/> 태그로 영화 id 값을 넘겨주어 해당 id값을 가지고 있는 영화에 대한 데이터를 상세 페이지에 넘겨준다.

Film.js

import React from "react";
import { Link } from "react-router-dom";
import "./Film.scss";

const Film = ({ movie, slide }) => {
 const { id, name, release_date, image_url, country, running_time_min } = movie;

  return (
    <li className="film" id={id}
      style={{
        transform: `translateX(${slide}px)`,
        transition: "0.5s ease",
      }}
    >
      <Link to={`/detail/${id}`} className="filmDetail">
        <div className="posterBox">
          <img src={image_url} alt="개츠비" className="filmPosters" />
        </div>
        <div className="filmDescription">
          <p className="filmName">{name}</p>
          <p className="filmYear">
            {release_date} • {country}
          </p>
          <p className="filmAverage">⏱️{running_time_min}분</p>
        </div>
      </Link>
    </li>
  );
};

export default Film;

위의 코드에서 <Link to = />에 작성된 id는 부모요소인 MainBox 컴포넌트에서 받아온 id 값이다.

즉, 서버에서 받아온 영화 데이터의 고유 id값이다.
해당 id 값을 주소로 사용하기 위해 백틱 기호를 사용하여 변수로 넘겨준다.

`/detail/${id}`

이전 게시글에 언급했 듯, moveis안에 담긴 데이터를 컴포넌트에 데이터를 넘겨주며 map 함수를 돌리고 있다.

따라서 데이터의 갯수만큼 id 값도 각기 다른 값이 들어가고 id 값에 따라 영화 정보가 담겨있기 때문에 상세 페이지를 의미하는 주소 /detail 뒤에 받아오는 id 값을 정의하면 해당하는 영화 상세 페이지로 이동한다.

결과적으로, URL 이 /detail/1 로 변하면, Router 컴포넌트에 정의되어 있는 path='/product/:id' 에 따라, <Detail/> 컴포넌트가 마운트 된다.

⛳ Router 컴포넌트에 Path Parameter 정의하기

//Router.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Nav from "./components/Nav/Nav";
import Footer from "./components/Footer/Footer";
import Main from "./pages/Main/Main";
import Detail from "./pages/Details/Detail";

const Routers = () => {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/detail/:id" element={<Detail />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
};

export default Routers;

: 는 Path Parameter 가 올 것임을 의미한다.
id 는 해당 Path Parameter 의 이름을 의미한다.
변수 명을 짓듯이, 임의의 이름을 지정해줄 수 있다. ex) :MovieId

⛳ 흐름을 정리해보면!

영화 목록을 클릭하면, <Link />를 통해 /detail/${id} 로 이동한다. 여기서 id는 영화마다 다른 값을 가지고 있다. 예를 들어 id 값을 1로 가지고 있는 영화가 "위대한 개츠비"라고 가정해보자!

<Link to = `/detail/1`>

URL 이 /detail/1 로 변하면, Router 컴포넌트에 정의되어 있는 path='/detail/:id' 에 따라 Detail 컴포넌트가 마운트 된다.

Detail 컴포넌트에서는 백엔드에 id 가 1 인 아이템에 대한 정보를 요청한다.

응답으로 받은 정보를 setFilmsData 함수를 통해 FilmsData 라는 state에 저장하고, 이를 통해 상세 페이지 UI 가 그려진다.
이 부분은 영화 상세 페이지를 구현하는 다른 팀원의 코드를 가져왔다.

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

const Detail = () => {
  const params = useParams();

  const [filmsData, setFilmsData] = useState([]);

  useEffect(() => {
    fetch(`http://서버주소:8000/detail/${params.id}`)
      .then(res => res.json())
      .then(res => setFilmsData(res));
  }, []);
}

여기서 생소한 단어가 보인다 Params

React Router 에서는 useNavigate, useLocation, useParams 라는 라우팅 관련한 훅을 제공한다. 이 중 useParams 훅을 사용하면 url 에 담겨있는 id 값을 가져올 수 있다.

const params = useParams();
//Router에서 넘어온 정보를 params에 담는다.
fetch(`http://서버주소:8000/detail/${params.id}`)
//fetch함수를 사용하여 params에 담긴 속성 중 id 값을 가져온다!

---

⛳ Long Story Short

이미지 슬라이드가 가장 어려울 줄 알고 이미지 슬라이드 구현 후 살짝 긴장을 풀었다. 하지만 동적 라우터가 기다리고 있었다. 도저히 어떤 개념인지 잡히지 않아 여러 동기들을 붙잡고 물어보았다. 멘토님들의 도움도 받았지만 역시 접근 방법만 말씀해주시는 멘토님들.. 정답은 내가 찾아야 한다.
하루 종일 구글링, 코드 구걸을 한 끝에 동기의 도움으로 개념이 조금씩 이해가기 시작했다!! 데이터를 받고 넘겨주는 과정이 백과 프런트 사이에서만 일어나는 줄 알았지만 이렇게 프런트가 프런트에게 id 값을 넘겨주는 경우가 있다는 것을 경험했다.

앞으로 할 일은 서버에서 영화 목록에 대한 데이터를 받아오는 일! Mockdata 대신 진짜 데이터를 받는다!! 설렌다. 하지만 그 전에 Query Parameter를 알아야 한다.