다이나믹 라우팅 in Next.js

동적 라우팅(Dynamin routing)은 정적 라우팅(Static routing)과 대비되는 말로 수동으로 경로를 추가하는 정적 라우팅에 반해 라우팅 테이블에서 경로의 현재 상태에 따라 경로를 자동으로 조정한다. 미리 정의·고정된 url이 아니라 동적으로 변화하는 주소에 연결하는 것을 말한다. 즉, 단일 페이지, 하나의 컴포넌트를 사용해 변화하는 데이터를 수용할 수 있는 페이지를 제작할 수 있다.

 

1. 리액트에서의 다이나믹 라우팅

리액트는 SPA이기 때문에 라우팅 시 react-router-dom의 보조를 받는다. 라우트 경로를 설정하는 페이지에서 라우트 할 경로를 선언해주고 사용한다. 

 

useParams를 사용해서 파라미터를 받아오는 것이 가능한데 주의할 점은 선언하는 변수명을 URL 파라미터의 이름과 같게 선언을 해야 실제 값이 들어있게 된다. useParams는 이런 식의 Path variable을 받아와야 할때 사용한다.

이를테면 blog/1, blog/2 같은 형태의 라우팅을 말한다.

useParams로 받아온 id같은 페이지 넘버를 받아서 그 페이지 패칭된 api에 사용해 주는 것이다. 그렇게 되면 Params를 이용한 api와 페이지의 Path variable이 일치하게 된다.

 

useSearchParams는 ?뒤에 key와 value가 쌍으로 연견된 값, 즉 쿼리 스트링(Query String)의 값을 얻어올 떄 사용한다.

useParams와는 다르게 아래와 같이 state 같은 구조분해할당 같은 형태를 지닌다. 

• const [searchParams, setSearchParams] = useSearchParams()

 

2. Next에서의 다이나믹 라우팅

Next에서 다이나믹 라우팅을 위해선 대괄호를 사용한 중첩폴더를 만들어 사용할 수 있다. 대괄호 사이에 임의의 식별자(slug, id 등)를 넣을 수 있는데, 이 폴더 아래에 다시 page.jsx를 만들어 준다.

물론 그 중첩폴더가 아닌 상위 폴더에서도 페이지를 사용할 수 있고, blog의 포스트와 같은 페이지에서 그렇게 사용되곤 한다. 저 대괄호는 어떠한 경로 분할은 원하지만, 아직 정확한 값을 모른다는 사실을 Next.js에 전달하는 것이다. 임의의 식별자는 경로에 값이 실릴 때 정확한 값에 접근할 수 있게 해준다.

 

Next.js는 props 객체를 모든 페이지 컴포넌트에 전달한다.
이 프로퍼티를 구조분해할당으로 뽑아서 사용하는 것이 가능하다.

 

export default function BlogPostPage({ params }: { params }: { slug: string }) {
  return (
    <main>
      <h1>Blog Post</h1>
      <p>{params.slug}</p>
    </main>
  );
}

 

위의 params prop는 Next에서 설정되며, 이 컴포넌트를 수동으로 렌더링하는 것이 아니기 때문에 수동으로 전달할 필요가 없다. Next에서 대신 해주고 prop또한 대신 설정해준다. route에 임의로 넣은 모든 이름이 있는 객체가 키이며 여기선 url에 인코딩 된 값이다. 대괄호를 이용한 라우팅 시 데이터를 전달하기 전까진 같은 페이지로 연결되고 url만 다를텐데, 그 url을 위와 같이 뽑아서 볼 수도 있다. 당연히 주소창에 임의의 slug를 입력해도 그대로 나온다. 왜냐하면 아직 어떤 Path에 어떤 값이 들어갈 지 설정해주지 않았기 때문이다.