React Router로 동적 라우팅 구현하기

소개

SPA에서 URL에 따라 다른 데이터를 보여주려면 동적 라우팅이 필요하다. 이 글은 React Router로 동적 라우팅을 구현하는 방법을 초보자도 이해하기 쉽게 설명한다. 핵심은 경로에 파라미터를 두고 컴포넌트에서 이를 읽어 데이터를 불러오는 흐름이다.

준비 사항

다음 전제 조건이 있다.

• React 17+ 또는 18+
• 리액트 라우터 v6 설치: npm install react-router-dom@6
• 기본적인 React 컴포넌트 이해

기본 라우터 설정

먼저 앱 전체에 라우터를 래핑한다. Routes와 Route 컴포넌트를 사용해 경로를 정의한다.

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">홈</Link> |
        <Link to="/users">사용자 목록</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

동적 라우팅 핵심: 경로 파라미터

동적 라우팅은 URL 일부를 변수로 두는 방식이다. 리액트 라우터 v6 사용법에서 파라미터는 콜론(:)으로 표시한다. 예를 들어 사용자 상세 페이지 경로를 /users/:id처럼 정의한다.

Route 정의

<Route path="/users/:id" element={<UserDetail />} />

컴포넌트에서 params 읽기

컴포넌트 내부에서는 useParams 훅으로 파라미터를 추출한다. 이를 통해 id로 API를 호출하거나 로컬 데이터에서 항목을 찾는다.

import { useParams, useNavigate } from 'react-router-dom';

function UserDetail() {
  const { id } = useParams();
  const navigate = useNavigate();

  // 예: id로 데이터 조회
  // fetch(`/api/users/${id}`)...

  return (
    <div>
      <h3>사용자 {id} 상세</h3>
      <button onClick={() => navigate(-1)}>뒤로</button>
    </div>
  );
}

동적 경로를 데이터로부터 생성하기

목록을 보여주고 아이템마다 동적 링크를 만드는 경우가 많다. 배열을 map해서 동적 링크를 만들면 라우트와 연결된다.

function Users() {
  const users = [
    { id: '1', name: 'Alice' },
    { id: '2', name: 'Bob' }
  ];

  return (
    <div>
      <h2>사용자 목록</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

중첩 라우트와 동적 라우팅

리액트 라우터 v6 사용법에서는 중첩 Routes를 통해 레이아웃을 재사용한다. 부모 경로에 공통 UI를 두고 자식에서 동적 파라미터를 처리한다.

<Routes>
  <Route path="/users" element={<UsersLayout />} >
    <Route index element={<UsersList />} />
    <Route path=":id" element={<UserDetail />} />
  </Route>
</Routes>

에러 처리와 404

동적 경로에서 존재하지 않는 id를 요청하면 404 처리가 필요하다. useParams로 받은 id로 조회 후 결과가 없으면 NotFound 컴포넌트를 렌더링하면 된다.

if (!user) {
  return <NotFound />;
}

요약

• react router 동적 라우팅은 경로에 콜론을 사용해 파라미터를 정의한다.
• 컴포넌트에서는 useParams로 값을 읽고 데이터를 가져온다.
• 리스트에서 동적 링크를 생성하면 개별 페이지로 이동시킬 수 있다.
• 중첩 라우트로 레이아웃 재사용 및 구조화가 가능하다.

위 흐름을 따라하면 react router params 처리와 동적 라우팅을 실무에서 안정적으로 적용할 수 있다. 간단한 예제부터 시작해 점진적으로 API 연동과 에러 처리를 추가하면 무리가 없다.