next에서의 라우팅

리액트로 개발을 하다가 next.js로 개발을 시작하면 가장 크게 와닿는 부분이 바로 라우팅 방식이다. 리액트는 자체적으로 라우팅을 제공하지 않기 때문에 react-router-dom을 활용하여 라우팅을 하지만 
next.js는 이전 12버전까지는 pages 디렉토링을 통해, 13버전부터는 app 디렉토링을 통해 라우팅 기능을 제공한다. next.js에서 기본적으로 제공되는 라우팅 방식이 어떤지 확인해보자.

 

라우팅이 뭔데?
 아주 쉽게 말하면 우리가 브라우저 주소창에 적는 경로를 의미한다.
 예를 들어, 도메인/contact/next 주소로 접속을 하려고 하면 서버에서는 contact/next 라는 api에 맞는 화면을 제공하는 것을 이야기한다. 리액트에서는 Route 라는 컴포넌트의 path 속성을 통해서 컴포넌트를 렌더링해주는 것이었는데 next에서는 이런 방식이 아니라 폴더를 통한 라우팅을 제공한다.

 

1. 기본 라우팅 방식

 next에서 제공하는 라우팅에 대해서 왼쪽 사진을 통해 간단하게 설명을 하고자 한다.

 next 프로젝트를 만들고 npm run start를 하고 왼쪽 사진과 같이 디렉토링을 했다면 http://localhost:3000 을 통해 src/app/page.tsx 컴포넌트가 렌더링된다. 같은 방식으로 이해하면 http://localhost:3000/about 을 통해서는 src/app/about/page.tsx 컴포넌트가 렌더링 되는 것이다. 즉 폴더의 구조에 따라서 해당 page.tsx에 해당하는 컴포넌트를 렌더링하고 이 때에 중요한 것은 기존 12버전과 다르게 존재하는 layout.tsx 라는 녀석인데, 이 녀석은 별도의 글에서 설명하겠다.

 

2. 동적 라우팅 방식

 동적경로는 [이름] 폴더를 통해서 접근한다. 이름은 통상적으로 slug로 작성을 하는데, 이것은 순전히 팀 컨벤션에 따라서 작성하면 된다. 위의 사진에서 slug로 되어있으니 slug로 설명을 하겠다.

동적경로라는 건 어떨때 사용하는 것을 이야기할까?
 예를 들어서 어떤 카테고리에 해당하는 것들을 나타내려고 할때가 가장 적합할 것이다. 어떤 사이트의 product 페이지에서 pants, shirts 와 같은 각 카테고리들에 접근해서 그 값을 서버에서 받아오려고 할때에 사용하는 것이 가장 일반적인 예시 중 하나일 것 같다.

http://localhost:3000/about/hi 을 통해서는 src/app/about/[slug]/page.tsx 컴포넌트가 렌더링 되는 방식이다.

즉 [slug]에 해당하는 값은 어떤 값을 넣더라도 이 [slug] 폴더 안의 page.tsx 컴포넌트로 접근한다.

참고로, 이 경로를 옵셔널하게 처리하는 것은 위의 사진과 같이 [[ ]]로 두번 감싸주는 것이다.

그럼 동적인 경로 하위 경로는 어떻게 처리할까?

이 경우에 세가지로 나누어 설명할 수 있다.
1. 정적 라우팅의 경우에는 이전에 기본 라우팅을 설명한 것과 같이 하위에 정적인 라우팅 경로를 갖는 경우

2. 동적 라우팅 경로 아래에 동적인 경로만을 가질 경우

이 경우 주의해야할 것은 [...slug] 폴더에 하위 경로를 만들게 되면 에러가 발생한다는 점이다.

3. 정적인 경로와 동적인 경로를 같이 가질 경우

처리를 하기 위한 동적인 값을 받아오는 것은 next가 자동으로 제공!

import React from "react";
type Props = {
  params: {
    slug: string;
  };
};
const page = ({ params }: Props) => {
  return <div>{params.slug}</div>;
};

export default page;

slug를 통해 동적인 경로를 설정했다면 위의 코드와 같이 slug를 통해서 받아 올 수 있다.

3. 라우팅 그루핑하기

 ()안에 폴더 이름을 감싸주면 경로에는 영향을 주지 않고 폴더 디렉토링만 관여할 수 있다.

 즉, http://localhost:3000/contact/us 가 아니라 http://localhost:3000/us로 접근한다는 것이다. 개발자가 디렉토링만을 위해서 분류하기 위해서 사용할 수 있는 방식이다.