[React - 13] useSearchParams

JS의 URLSearchParams를 React Hook이라고 보면 되겠습니다.

https://white120.tistory.com/85

[JavaScript - 25] URLSearchParams

 

useSearchParams는 React Router (특히 v6 이후 버전)에서 제공하는 hook 중 하나입니다. 

이 hook을 사용하면 현재 URL의 검색 매개 변수(search parameters)에 쉽게 액세스하고 조작할 수 있습니다.

 

검색 매개 변수는 일반적으로 URL의 ? 뒤에 있는 쿼리 문자열로 표시됩니다.

예) URL: http://example.com/page?param1=value1&param2=value2

//위 URL 예시를 통해 조작을 해보겠습니다.
import { useSearchParams } from "react-router-dom";

function SearchPage() {
  let [searchParams, setSearchParams] = useSearchParams();

  // 현재 param1의 값을 얻습니다.
  let param1 = searchParams.get("param1");

  // 검색 매개 변수를 설정하려면 setSearchParams를 사용합니다.
  function setParameter() {
    setSearchParams({ param1: "newValue" });
  }

  return (
    <div>
      <p>Param1 value: {param1}</p>
      <button onClick={setParameter}>Set Param1</button>
    </div>
  );
}

useSearchParams는 쿼리 문자열을 읽고 쓰기 위한 편리한 방법을 제공하므로, 

별도의 라이브러리나 복잡한 로직 없이 URL의 검색 매개 변수와 상호 작용할 수 있습니다.