React Dynamic Route Segments

React와 Next.js에서 동적 라우트(Dynamic Route Segments)를 활용하면 유연한 페이지 구조를 만들 수 있습니다.

 

동적 경로 세그먼트

동적 경로(Dynamic Route)는 URL의 일부가 변수처럼 동적으로 변하는 구조를 의미합니다.

예를 들어, 블로그에서 개별 게시글을 가져오는 URL이 있다고 가정하면 다음과 같은 구조가 가능합니다.

/posts/1  → 1번 게시글
/posts/2  → 2번 게시글

 

위와 같이 특정한 숫자(또는 ID)에 따라 콘텐츠가 달라지는 경우, 동적 경로 세그먼트를 활용하면 효율적으로 페이지를 구성할 수 있습니다.

 

Next.js에서 동적 라우트 설정

기본 동적 라우트 [id]

Next.js에서는 폴더 기반의 라우팅 시스템을 활용하여 동적 라우트를 설정할 수 있습니다.

예를 들어, pages/posts/[id].tsx 파일을 생성하면 /posts/1, /posts/2와 같은 URL을 처리할 수 있습니다.

동적 라우트 예제

// pages/posts/[id].tsx
import { useRouter } from 'next/router';

const PostDetail = () => {
  const router = useRouter();
  const { id } = router.query; // URL의 id 값을 가져옴

  return (
    <div>
      <h1>게시글 상세 페이지</h1>
      <p>게시글 ID: {id}</p>
    </div>
  );
};

export default PostDetail;

• 위 코드에서 useRouter의 router.query.id를 통해 URL의 동적 값을 가져올 수 있습니다.

---

다중 동적 경로 [...slug]

Next.js에서는 다중 동적 경로를 설정할 수도 있습니다.

예를 들어, pages/posts/[...slug].tsx 파일을 만들면 /posts/category/react, /posts/2024/02/react-hooks 같은 URL을 처리할 수 있습니다.

// pages/posts/[...slug].tsx
import { useRouter } from 'next/router';

const DynamicPost = () => {
  const router = useRouter();
  const { slug } = router.query; // 배열 형태로 값이 들어옴

  return (
    <div>
      <h1>동적 게시글</h1>
      <p>경로: {JSON.stringify(slug)}</p>
    </div>
  );
};

export default DynamicPost;

• slug는 배열로 값이 들어오기 때문에, URL에 따라 다른 데이터를 가져오도록 처리할 수 있습니다.

---

React Router에서 동적 라우트 설정

Next.js 외에도 React Router를 사용하는 프로젝트에서도 동적 라우팅을 설정할 수 있습니다.

:id를 사용한 동적 라우트 설정

React Router에서는 :id와 같은 형식으로 동적 경로를 정의할 수 있습니다.

// App.tsx
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import PostDetail from './PostDetail';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/posts/:id" element={<PostDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

---

그리고 useParams를 이용해서 id 값을 가져올 수 있습니다.

// PostDetail.tsx
import { useParams } from 'react-router-dom';

const PostDetail = () => {
  const { id } = useParams();

  return (
    <div>
      <h1>게시글 상세</h1>
      <p>게시글 ID: {id}</p>
    </div>
  );
};

export default PostDetail;

• 이렇게 하면 /posts/1로 접근했을 때 id 값이 1로 인식됩니다.

 

다중 동적 경로 :category/:id

React Router에서는 다중 동적 경로도 설정할 수 있습니다.

// App.tsx
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import CategoryPostDetail from './CategoryPostDetail';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/posts/:category/:id" element={<CategoryPostDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

// CategoryPostDetail.tsx
import { useParams } from 'react-router-dom';

const CategoryPostDetail = () => {
  const { category, id } = useParams();

  return (
    <div>
      <h1>카테고리별 게시글</h1>
      <p>카테고리: {category}</p>
      <p>게시글 ID: {id}</p>
    </div>
  );
};

export default CategoryPostDetail;

• 이렇게 하면 /posts/react/1 경로로 접근했을 때, category 값은 react, id 값은 1로 추출됩니다.

---

4. SEO 및 성능 고려 사항

동적 라우트를 사용할 때 SEO 및 성능 최적화도 고려해야 합니다.

• Next.js의 getStaticPaths와 getServerSideProps 활용: 정적 생성(SSG)과 서버 사이드 렌더링(SSR) 방식을 선택하여 성능을 최적화할 수 있습니다.
• React Router에서 데이터 프리페칭 적용: React Query 같은 라이브러리를 활용하여 미리 데이터를 불러올 수 있습니다.