next/navigation useParams

useParams 는 현재 URL 경로의 동적 매개변수를 읽을 수 있는 클라이언트 구성 요소 후크이다.

'use client' 설정은 필수이다.

만약 word/${동적변수} 경로라면 폴더 구조를 word/[slug]/page.tsx 와 같이 구성해야 한다.

폴더 구조는 이렇게 구성하고,

코드는 아래와 같다.

'use client';

import {useParams} from 'next/navigation';

export default function Page() {
  const params = useParams();

  return (
    <>
      <h2>{params.slug}</h2>
    </>
  );
}

params의 값은  { 대괄호안 폴더명 : 동적 파라미터 값 } 이 된다.

만약 URL 경로가 /word/book 이라면 아래와 같이 구성될 것이다. slug는 [ ] 안의 폴더명이다.

`params` -> { slug : 'book' }
// { 폴더명 : 동적 파라미터 값 }