[Nextjs] searchParams로 URL 쿼리 스트링 파싱하기

📒 searchParam으로 쿼리스트링 파싱하기

모든 값들을 굳이 상태로 관리할 필요가 없습니다.

 

간단한 값을 저장하거나, 값을 유지시키며 URL을 공유할 때 주로 쿼리스트링을 사용하는데,

이를 사용하기 위해선 다음과 같이 URL 마지막에 “?”를 추가한 후 데이터를 key=value 형태로 나열하면 됩니다.

https://abcd.com?키=값&키2=값2

그럼 nextjs에서 어떻게 쿼리스트링을 파싱할 수 있는지 소개합니다.

 

📌 Server Component

type SearchParamProps = {
  searchParams: {
    page: number;
    title: string;
  };
};

export default function ServerSearchParam(props: SearchParamProps) {
  const page = props.searchParams.page;
  const title = props.searchParams.title;
  return (
    <div>
      <h1>{JSON.stringify(props)}</h1>
      <h1>{`page -> ${page} / title -> ${title}`}</h1>
    </div>
  );
}

서버 컴포넌트를 사용할 경우에는 사전에 정의된 쿼리 스트링을 해당 페이지 props의 searchParam 타입으로 정의해두면 간편하게 props.searchParams.key로 사용할 수 있습니다.

 

📌 Client Component

"use client";

import { useSearchParams } from "next/navigation";

export default function ClientSearchParam() {
  const searchParams = useSearchParams();
  const page = searchParams.get("page");
  const title = searchParams.get("title");

  return (
    <div className={style.box}>
      <h1>{`page -> ${page} / title -> ${title}`}</h1>
    </div>
  );
}

클라이언트 컴포넌트에서는 간편하게 쿼리 스트링을 탐색할 수 있는 useSearchParams란 훅을 제공해줍니다.

서버 컴포넌트와 마찬가지로 props를 통해 쿼리 스트링을 파싱할 수 있지만, 훅의 다양한 기능을 사용해보는 것도 나쁘지 않아보입니다.

useSearchParams.get() 으로 값을 가져오는 것 뿐만이 아닌 다른 기능들을 탐색하고 싶은 분들께선 다음 공식 문서를 참조해주세요.

https://nextjs.org/docs/app/api-reference/functions/use-search-params

Functions: useSearchParams | Next.js