Next.js의 useParams 및 useSearchParams 사용법

Next.js의 최신 버전에서 URL 파라미터 및 쿼리 파라미터를 가져오는 방법이 변경되었습니다.

이전의 React Router와 다르게, Next.js에서는 next/navigation 모듈을 통해 URL의 동적 파라미터 및 쿼리 파라미터를 쉽게 가져올 수 있는 훅들을 제공합니다.

 

1. 문자열 및 쿼리 파라미터 가져오기

useParams 훅

useParams는 현재 경로에서 동적 파라미터를 가져오는 훅입니다. 주로 페이지 라우팅에서 URL의 세그먼트로 전달된 값을 읽을 때 사용됩니다.

사용 예시

import { useParams } from 'next/navigation';

export default function Home() {
    const { clientId } = useParams(); // URL에서 clientId 가져오기
    
    // 구현할 로직...
}

위 코드에서 clientId는 URL 경로에 정의된 클라이언트 ID를 나타냅니다.

useSearchParams 훅

useSearchParams는 URL의 쿼리 파라미터를 가져오는 데 사용됩니다. 이 훅은 검색 문자열에 포함된 파라미터를 쉽게 읽고 쿼리 파라미터를 검색할 수 있도록 도와줍니다.

사용 예시

import { useSearchParams } from 'next/navigation';

export default function Home() {
    const searchParams = useSearchParams(); // 쿼리 파라미터 가져오기
    const media = searchParams.get('media'); // 특정 쿼리 파라미터를 가져옴
    
    // 구현할 로직...
}

 

위 코드에서 media는 쿼리 문자열 안의 media 파라미터의 값을 나타냅니다.

2. 프로젝트 폴더 구조

Next.js에서 동적 라우팅을 구현하기 위해서는 폴더 구조를 다음과 같이 설정해야 합니다.

src/
├── app/
│   ├── client/
│   │   ├── [clientId]/       // 클라이언트 ID를 동적으로 처리
│   │   │   ├── workboard/     // 각 클라이언트의 작업 보드
│   │   │   │   └── page.tsx   // 작업 보드 페이지
│   ├── ...
└── ...

 

navigation.d.ts 을 보면 가져오는 방법이 있습니다

import type { Params } from '../../server/request/params';
import { type AppRouterInstance } from '../../shared/lib/app-router-context.shared-runtime';
import { ReadonlyURLSearchParams } from './navigation.react-server';

/**
 * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
 * that lets you *read* the current URL's search parameters.
 *
 * Learn more about [`URLSearchParams` on MDN](https://developer.mozilla.org/docs/Web/API/URLSearchParams)
 *
 * @example
 * ```ts
 * "use client"
 * import { useSearchParams } from 'next/navigation'
 *
 * export default function Page() {
 *   const searchParams = useSearchParams()
 *   searchParams.get('foo') // returns 'bar' when ?foo=bar
 *   // ...
 * }
 * ```
 *
 * Read more: [Next.js Docs: `useSearchParams`](https://nextjs.org/docs/app/api-reference/functions/use-search-params)
 */
export declare function useSearchParams(): ReadonlyURLSearchParams;

/**
 * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
 * that lets you read a route's dynamic params filled in by the current URL.
 *
 * @example
 * ```ts
 * "use client"
 * import { useParams } from 'next/navigation'
 *
 * export default function Page() {
 *   // on /dashboard/[team] where pathname is /dashboard/nextjs
 *   const { team } = useParams() // team === "nextjs"
 * }
 * ```
 *
 * Read more: [Next.js Docs: `useParams`](https://nextjs.org/docs/app/api-reference/functions/use-params)
 */
export declare function useParams<T extends Params = Params>(): T;

3. 요약

• 훅 사용: useParams와 useSearchParams 훅을 통해 URL의 경로에서 동적 파라미터와 쿼리 파라미터를 가져올 수 있습니다.
• 폴더 구조: 동적 URL 처리를 위한 폴더 구조를 정의하여 각 클라이언트에 대한 페이지를 쉽게 관리할 수 있습니다.