동적 라우팅

동적 라우팅이란 라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것을 의미합니다.
보통의 웹 사이트는 전체 아이템이 보여지는 리스트 페이지와 거기서 어떤 아이템을 선택했을 때 해당 아이템의 디테일 한 정보가 보여지는 상세 페이지로 구성되는데, 이 때 동적 라우팅이 사용됩니다.

위의 예시에서는 step 이 1인 데이터들을 렌더링 해주는 것을 볼 수 있습니다.

동적 라우팅 구현

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 컴포넌트에서 다음과 같이 정의됩니다.

// Router.js
<BrowserRouter>
  <Routes>
    <Route path='/problem/**:id**' element={<ProblemDetail />} />
  </Routes>
</BrowserRouter>

path 부분을 설명하자면

• : 는 Path Parameter 가 올 것임을 의미합니다
• id는 해당 Path Parameter를 의미합니다. 이 값은 변수명과 같으므로 임의로 이름을 지정할 수 있습니다. ex) :problemId

Router 컴포넌트의 path 프로퍼티에 :id 를 통해 Path Parameter를 명시 해준 후, 동적 라우팅이 동작되는 흐름을 먼저 살펴보겠습니다.

1. 문제 목록에서 문제를 선택하게 되면, onClick 이벤트에 useNavigate 훅을 통해 /problem/2557 로 이동하게 됩니다. URL이 /problem/2557로 변하게 되면 Router.js에서 설정해 두었던 path 프로퍼티에 따라 ProblemDetail이 마운트 됩니다.

2. ProblemDetail 컴포넌트에서는 백엔드 측에 id 값이 2557인 문제에 대한 정보를 요청합니다.

3. 응답받은 데이터를 setState 함수를 통해 저장하고, 이를 통해 디테일 페이지가 렌더링 됩니다.

2번 스텝에서, ProblemDetail 컴포넌트의 useEffect 훅을 통해 백엔드에 해당 id에 대한 문제데이터 요청을 보냈습니다. 그런데 이 id값을 ProblemDetail은 어떻게 가져올 수 있었을까요? 정답은 useParams 훅에 있습니다.

2. useParams Hook

useParams 훅은 다음과 같이 사용합니다.

// ProblemDetail 컴포넌트

// 현재경로: /problem/2557
function ProductDetail(props) {
  const params = useParams();
  
  console.log(params);

  return (
    ...
  )
}

useParams 훅을 실행하게 되면 Path Parameter 정보를 담고 있는 객체를 반환하게 됩니다. 위 코드에서는 해당 객체를 params 라는 변수에 할당해 주었는데요, params를 출력 시 아래 와 같이 출력됩니다.

{
	id: 2557
}

여기서 객체의 id 라는 키네임은 Router.js 에서 :id로 표기해준 값입니다. 만약 저 부분을 :problemId로 변경 시 출력되는 값은

{
	problemId: 2557
}

나오게 됩니다.

정리하자면
useParams를 통해 url로 넘어온 id 값을 ProblemDetail 컴포넌트에서 가져올 수 있었습니다.

3. useParams().id

// ProblemDetail 컴포넌트

// 현재경로: /problem/2557
function ProductDetail(props) {
  const params = useParams();
  
  useEffect(() => {
  fetch(`http://백준/problem/${params.id}`)
    .then(res => res.json())
    .then(res => setData(res));
  },[]);

  return (
    ...
  )
}

위와 같이 useEffect 훅에서 useParams로 받아온 id 값을 통해 서버에 요청을 보내 원하는 정보를 받아올 수 있었습니다.