Skip to main content

페이지 라우터의 라우팅 구성 방법

페이지 라우터(Page Router) 기반의 프로젝트에서 페이지 컴포넌트와 라우팅은 어떻게 구성하는지 알아봅시다.

파일 기반 라우팅​

페이지 라우터에서는 프로젝트 루트 레벨에 pages 폴더를 생성하고 리액트 컴포넌트 파일을 추가하면 자동으로 파일 기반의 라우팅이 구성됩니다. 예를 들어, 다음과 같은 폴더 구조가 있다고 합시다.

components/
pages/
  login.jsx
package.json

pages 폴더 밑에 login 이라는 리액트 컴포넌트를 배치했습니다. 이 리액트 컴포넌트의 코드가 다음과 같다고 합시다.

pages/login.jsx
export default function Login() {
  return <div>로그인</div>
}

이렇게 되면 웹 애플리케이션을 실행했을 때 사용자가 /login 이라는 URL로 접근할 수 있게 되고, 위 Login 컴포넌트의 내용이 화면에 그려질 겁니다.

이와 같이 페이지 라우터에서는 pages 폴더 하위에 생성한 리액트의 파일 이름을 따라 라우팅이 구성됩니다.

파일과 폴더 기반 라우팅​

pages 폴더 밑에 파일 뿐만 아니라 중첩된 폴더와 파일을 생성할 수도 있습니다.

pages/
  login.jsx ⬅️ `/login` URL로 접근
  blog/
    index.jsx ⬅️ `/blog` URL로 접근
  dashboard/
    setting/
      menu.jsx ⬅️ '/dashboard/setting/menu' URL로 접근

위 폴더 구조를 보면 pages 폴더 밑에 blog 폴더와 dashboard 폴더 등 여러 개의 중첩된 폴더가 배치되어 있습니다. pages/blog/index.jsx에 정의된 내용은 최종적으로 /blog URL에 접근했을 때 화면에 표시됩니다. 마치, pages/blog.jsx처럼 정의된 것과 같은 효과죠. 이처럼 파일 뿐만 아니라 폴더로도 URL의 경로를 정할 수 있습니다.

동적 라우팅​

동적 라우팅(Dynamic Routing)이란 pages 폴더 밑에 다음과 같이 대괄호로 파일을 작명하여 여러 URL 값을 대응할 수 있게 하는 방법입니다.

pages/
  users/
    [id].jsx ⬅️ users/1`, users/20` 등으로 접근 가능

pages 폴더 밑에 파일 이름을 [단어] 형태로 작성하면 해당 경로에 어떤 URL이 오든 매칭됩니다. 예를 들어, 위 예시 구조에서는 users/1, users/2 등 users/ 뒤에 어떤 값이 들어와도 다 매칭될 수 있습니다.

동적 라우팅은 같은 성격의 페이지에서 아이디나 특정 구분 값으로 페이지의 정보를 약간 다르게 표시할 때 사용됩니다. 구현하는 개발자 입장에서는 사용자가 정확하게 어떤 URL을 입력할지를 알수 없기 때문에 사용자가 URL을 입력한 시점에 URL 값으로 페이지 정보를 구분합니다.

예를 들어, 블로그가 하나 있고 게시글이 여러개라고 해보겠습니다. 게시글 페이지를 들어갈 때마다 페이지 상단에 x번째 게시글 입니다를 표시하려면 동적 라우팅으로 다음과 같이 구현할 수 있습니다.

pages/blog/[blogId].jsx
import { useRouter } from 'next/router'
 
export default function BlogArticle() {
  const router = useRouter()
  
  return (
    <h1>{router.query.blogId}번째 게시글</h1>
    <div>
      {/* ... */}
    </div>
  )
}
tip

동적 라우팅에 대해서 더 자세히 알고 싶다면 다음 문서를 참고하세요.
Dynamic Routes - Next.js