필터 상태를 URL searchParams로 옮기면 링크가 콘텐츠가 돼요

혼자 브랜드를 운영하면 글 쓰는 시간보다 "이거 한번 봐 주세요"라며 링크 보내는 시간이 더 길어요. 그런데 목록 화면의 필터를 useState로만 들고 있으면 그 링크가 성립하지 않아요. 카테고리, 기간, 정렬까지 필터 3개를 골라 놓은 화면도 주소창에는 /list 하나만 남거든요. 새로고침 1번이면 사라지고, 복사해서 보내면 받는 쪽은 아무것도 안 걸린 첫 화면을 봐요.

그래서 상태를 URL searchParams로 옮겼어요. 직접 옮겨 보니 기술 이슈라기보다 콘텐츠 운영 문제였어요.

링크가 곧 게시물이 되는 구조

필터가 URL에 있으면 ?cat=loan&sort=latest 같은 주소 하나가 하나의 글감이에요. SNS에는 "대출 계산만 모아봤어요"라며 그 주소를 붙이고, 뉴스레터에는 "이번 주 추가된 것" 조합을 보내고, 문의 답변에는 상대가 찾던 조합을 그대로 돌려줄 수 있어요. 글을 새로 쓰지 않아도 조합마다 입구가 생기는 셈이에요.

플랜씨처럼 로그인 없이 쓰는 도구라면 효과가 더 커요. 받는 사람이 가입 절차 없이 링크 한 번으로 바로 그 화면에 도착하니까요.

구현은 3단계예요

Next.js App Router 기준으로 적용해 봤더니 20줄 안쪽이었어요. 읽기는 useSearchParams, 쓰기는 URLSearchParams로 복사본을 만든 뒤 router.replace, 초기화는 파라미터를 지우는 것으로 끝나요.

"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
export function useFilterParams() {
  const router = useRouter();
  const pathname = usePathname();
  const params = useSearchParams();
 
  function set(key: string, value: string) {
    const next = new URLSearchParams(params.toString());
    value ? next.set(key, value) : next.delete(key);
    router.replace(`${pathname}?${next.toString()}`);
  }
 
  return { get: (key: string) => params.get(key) ?? "", set };
}

테스트해 보면 뒤로가기 동작이 달라져요. push를 쓰면 필터를 바꿀 때마다 히스토리가 쌓여서 뒤로가기를 여러 번 눌러야 하고, replace를 쓰면 한 번에 이전 페이지로 나가요. 목록 필터는 replace가 자연스러웠어요. 정적으로 렌더링되는 페이지라면 useSearchParams를 쓰는 컴포넌트를 Suspense로 감싸라는 안내가 뜨니 그것만 챙기면 돼요.

운영하면서 생긴 보너스

돌려 보니 분석 도구에서 페이지뷰가 URL 단위로 갈라져요. 별도 이벤트를 심지 않아도 어떤 필터 조합이 많이 열리는지 보이니까, 다음에 어떤 조합을 글로 풀지 정하기 쉬워요. 직접 만들어 보니 한 번도 안 열리는 조합은 메뉴에서 빼도 되겠다는 판단도 같이 나왔어요.

주의할 점은 두 가지예요. 파라미터 이름은 짧고 바뀌지 않게 정해요. 한 번 공유된 링크는 브랜드가 한 약속이라, 나중에 이름을 바꾸면 그 링크가 전부 빈 화면이 돼요. 그리고 URL은 공개 정보라 개인 값이나 토큰은 넣지 않아요.

상태를 어디에 둘지는 작은 선택이지만, 1인 브랜드에서는 링크 하나가 홍보물이자 고객 응대예요. 15분이면 옮길 수 있으니 목록 화면이 있다면 주소창부터 확인해 보세요.