[Next.js] Dynamic routes

Dynamic routes

네스티드 라우트를 이용하면 하위 라우트를 쉽게 만들 수 있습니다.

 

만약 쇼핑몰 사이트에서 상품을 등록하려고 하면 보통 '/제품군/아이디' URL을 이용해야 하는데, 그렇다면 아이디에 따라서 폴더를 계속 만들어야 할까요?

 

아닙니다. 대괄호로 내부에 원하는 이름을 지정하면 해결할 수 있습니다.

위 이미지처럼 폴더 이름을 대괄호로 감싸주면 '/products/[productId]'를 통해 접근할 수 있게 됩니다.

 

그럼 다음과 같은 고민이 듭니다. '이렇게 되면 productId로 들어오는 모든 문자에 대해서 해당 페이지가 보이는 게 아닌가?'

 

맞습니다. 숫자가 들어오든 문자가 들어오든 동일한 페이지를 보여주게 됩니다. 페이지를 구분하기 위해서 먼저 URL에서 productId를 가져와야 합니다. 이때 params 변수가 사용됩니다. 아래 코드를 보면서 이해하고 넘어가겠습니다.

export default async function ProductDetail({params}:
  {params: Promise<{productId: string}>}) {
  const productId = (await params).productId;
  
  return <h1>Details about product {productId}</h1>
}

왜 params를 Promise 타입으로 지정해서 사용하는가?
사실 params에서 productId 값은 동기적으로 사용해도 문제가 없습니다.

아래 코드와 같이 말이죠.

export default function ProductDetail({params}:
  {params: {productId: string}}) {
  const productId = params.productId;
  
  return <h1>Details about product {productId}</h1>
}

하지만 Next에서 컴포넌트는 기본적으로 서버 컴포넌트로 비동기적인 작업이 들어갈 일이 많습니다. 따라서 productId의 값도 비동기적으로 사용해야 할 일이 발생할 수 있습니다. 그렇기 때문에 일관된 타입으로 다루기 위해서 Next에서 Promise로 감싸서 사용하는 것이 좋습니다.

>> 그렇다면 동기적으로 사용할 수 있는데 왜 await를 사용하는가?
동기적으로 사용할 수 있는 건 맞지만, 비동기 파이프라인으로 넘어간다면 다르게 동작하며 값이 없을 수 있기 때문에 async&await 문법으로 기다렸다가 사용하는 것이 안전합니다.

 

참고

https://nextjs-ko.org/docs/app/building-your-application/routing/dynamic-routes

https://www.youtube.com/watch?v=b4ba60j_4o8&list=PLC3y8-rFHvwhIEc4I4YsRz5C7GOBnxSJY