검색 조건을 URL query와 동기화해 공유 가능한 화면을 만듭니다.
useSearchParams는 Client Component에서 현재 query를 읽습니다. URL은 검색, 필터, 페이지처럼 새로고침과 공유 뒤에도 유지되어야 하는 상태에 적합합니다.
값이 없거나 여러 개거나 잘못된 타입인 경우 기본값과 허용 범위를 검증합니다.
query 갱신은 기존 parameter를 보존할지 명시하고 사용자 입력을 URL에 넣기 전 민감정보 여부를 확인합니다.
비밀번호와 토큰을 URL에 넣으면 기록, 로그, referrer에 남을 수 있습니다.
로컬 프로젝트에서 확인해보세요level query를 읽고 허용되지 않은 값은 all로 처리하세요.
"use client";
import { Suspense } from "react";
import { useSearchParams } from "next/navigation";
function Filter() {
const params = useSearchParams();
const query = params.get("q") ?? "";
return <p>검색어: {query || "전체"}</p>;
}
export default function Page() {
return (
<main>
<h1>URL 검색 상태</h1>
<Suspense fallback={<p>준비 중...</p>}>
<Filter />
</Suspense>
</main>
);
}