Next.js의 레이아웃 유지와 searchParams 갱신 문제

Next.js에서는 페이지 이동 시 공통 레이아웃이 리렌더링되지 않고 유지됩니다. 하지만 URL이 변경되면서 쿼리 매개변수(search parameters)가 바뀔 경우, 그 값은 최신 상태로 반영되어야 합니다. 레이아웃 자체는 리렌더링되지 않기 때문에 searchParams 값이 갱신되지 않는 문제가 발생할 수 있습니다.

예를 들어, /teams?filter=active에서 /teams?filter=inactive로 이동한다면, 페이지 컴포넌트는 변경된 쿼리 매개변수(filter=inactive)를 반영해야 합니다. 하지만 레이아웃이 리렌더링되지 않아 기존 filter=active 값을 유지하게 됩니다. 이로 인해 searchParams가 최신 상태로 반영되지 않는 문제가 생길 수 있죠.

최신 searchParams를 유지하는 방법

Next.js는 이 문제를 해결하기 위해 두 가지 방법을 제안합니다:

  1. 페이지의 searchParams prop 사용하기
  2. 클라이언트 컴포넌트 내에서 useSearchParams 훅 사용하기

이 두 가지 방법을 사용하면 레이아웃이 리렌더링되지 않더라도, 최신 쿼리 매개변수를 페이지에 반영할 수 있습니다.

1. searchParams prop 사용하기

Next.js는 페이지 컴포넌트에 searchParams를 자동으로 prop으로 전달합니다. 이를 통해 쿼리 매개변수에 바로 접근할 수 있죠.

예시:

export default function TeamPage({ searchParams }: { searchParams: { filter: string } }) {
  return (
    <div>
      <p>현재 필터: {searchParams.filter}</p>
    </div>
  );
}

이 코드에서는 searchParams가 prop으로 전달되어 항상 최신 상태를 반영합니다. URL이 /teams?filter=inactive로 변경되면, 페이지는 자동으로 filter=inactive 값을 받게 됩니다.

2. useSearchParams 훅 사용하기

useSearchParams 훅은 클라이언트 컴포넌트 내에서 쿼리 매개변수를 가져오는 리액트 훅입니다. 이 훅은 쿼리 매개변수가 변경될 때마다 최신 값으로 자동 업데이트됩니다.

예시:

'use client';
import { useSearchParams } from 'next/navigation';

export default function FilteredTeamList() {
  const searchParams = useSearchParams();
  const filter = searchParams.get('filter');

  return <p>현재 필터: {filter}</p>;
}