useRouteMath vs useParams

1. useParams 방식

사용 예시

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

function MovieDetail() {
  // URL에 정의된 :movieId 파라미터를 바로 꺼냄
  const { movieId } = useParams<{ movieId: string }>();

  // movieId를 이용해 API 호출, 화면 렌더링 등 처리
  return <div>Movie ID: {movieId}</div>;
}

• 장점

  • 코드가 매우 간단하고 직관적입니다.
  • 오로지 “파라미터 값”만 필요할 때 딱 좋습니다.

• 단점

  • 현재 라우트가 어떤 패턴에 매칭됐는지(path 정보)까지는 알 수 없습니다.
  • 중첩된(네스티드) 라우팅에서 부모·자식 경로의 패턴을 분기해야 할 때 유연성이 떨어질 수 있습니다.

---

2. useMatch / useRouteMatch 방식

react-router-dom@6부터는 useMatch(pattern)을, v5에서는 useRouteMatch() 훅을 사용합니다.

사용 예시 (v6 기준)

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

function MovieDetail() {
  // "/movies/:movieId" 패턴에 매칭된 정보를 객체로 받음
  const match = useMatch("/movies/:movieId");

  // match.params.movieId 로 꺼낼 수 있음
  const movieId = match?.params.movieId;

  return <div>Movie ID: {movieId}</div>;
}

주요 특징

1. 패턴 매칭 정보

   • match 객체에는

     • params: 파라미터 값,
     • pathname: 매칭된 URL,
     • pattern: 매칭에 사용된 패턴 정보(path, caseSensitive, end 등)

   • 즉, “어떤 URL 패턴에 매칭됐는지”까지 알 수 있습니다.

2. 조건부 렌더링

   if (!match) {
     // URL이 /movies/:movieId 패턴이 아닐 때
     return <NotFound />;
   }

   이런 식으로 “패턴에 매칭되지 않았으면 다른 UI를 보여주기”도 쉽습니다.

3. 중첩 라우팅 대응

   • 중첩된 구조에서 부모 · 자식 경로가 겹칠 때, 각 레벨별로 useMatch를 써서
     “지금 내가 어느 레벨의 라우트에 있는가?”를 확인할 수 있어요.

---

3. 언제 무엇을 쓰면 좋을까?

상황	추천 방식	이유
단순히 파라미터 값만 필요할 때	useParams	코드가 더 간결하고 가독성이 좋습니다.
“지금 이 URL이 특정 패턴에 맞는지”도 함께 확인해야 할 때	useMatch	매칭된 패턴 정보(match.pattern)와 params를 둘 다 얻을 수 있습니다.
중첩된 네스티드 라우팅 구조에서 부모·자식 경로를 분기할 때	useMatch	레벨별로 match 객체를 받아서, “부모 경로”와 “자식 경로”를 각각 체크하기 편리합니다.

---

마무리 예시

// App.tsx
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/movies/:movieId" element={<MovieDetail />} />
</Routes>

// MovieDetail.tsx
import { useParams, useMatch } from "react-router-dom";

function MovieDetail() {
  // 1) 파라미터만 꺼낼 때
  const { movieId } = useParams<{ movieId: string }>();

  // 2) 패턴 매칭 정보도 필요할 때
  const match = useMatch("/movies/:movieId");

  console.log("Matched pattern:", match?.pattern);
  console.log("Movie ID:", movieId);

  return <div>Now showing details for movie #{movieId}</div>;
}

• useParams로는 값만,
• useMatch로는 값 + 매칭된 패턴 정보까지 가져오는 차이라고 이해하시면 됩니다.