useSearchParams, usePathname, useRouter - next.js

이 훅들은 Next.js 13 이후 버전에서 도입된 새로운 라우팅 기능을 활용하여 경로 이름과 검색 매개변수를 쉽게 조작할 수 있게 해줍니다.

"use client"
import { useSearchParams, usePathname, useRouter } from 'next/navigation';
// 여기서는 App Router 사용시이며,  next/router 것 아님. 이것은 Pages Router 사용 할때

export default function SearchParamsComponent() {
  const [searchParams, setSearchParams] = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();

  // URL에서 'name' 쿼리 매개변수를 가져옵니다.
  const name = searchParams.get('name') || '';

  // 폼을 제출할 때 호출되는 함수입니다.
  const handleSubmit = (event) => {
    event.preventDefault();
    const newName = event.target.elements.nameInput.value;

    // 'name' 매개변수를 새로운 값으로 업데이트합니다.
    setSearchParams({ name: newName });
  };

  // 쿼리 매개변수를 제거하는 함수입니다.
  const handleClear = () => {
    setSearchParams({});
  };

  return (
    <div>
      <h1>Path: {pathname}</h1>
      <h2>Current Name: {name}</h2>

      <form onSubmit={handleSubmit}>
        <label htmlFor="nameInput">Enter name:</label>
        <input id="nameInput" name="nameInput" type="text" defaultValue={name} />
        <button type="submit">Update Name</button>
      </form>

      <button onClick={handleClear}>Clear Name</button>
    </div>
  );
}

useSearchParams

이 hook은 현재 URL의 검색 매개변수(Search Params)에 접근하고, 이를 수정할 수 있는 함수를 반환합니다. searchParams.get('name')는 'name' 매개변수의 현재 값을 가져오고, setSearchParams는 새로운 검색 매개변수를 설정하여 URL을 업데이트합니다.

usePathname

이 훅은 현재 URL의 경로명을 반환합니다.

useRouter

위 예제에서는 사용되지 않았지만, 이 훅은 Next.js 라우터 객체에 대한 접근을 제공합니다. 이 객체를 통해 라우터의 여러 기능을 사용할 수 있습니다.

router.push(href, { scroll: boolean }): 브라우저의 기록 스택에 새 항목을 추가합니다.
router.replace(href, { scroll: boolean }): 브라우저의 기록 스택에 새 항목을 추가하지 않음

router.refresh(): 현재 경로를 새로 고칩니다. 서버에 새 요청을 보내고, 데이터 요청을 다시 가져오고, 서버 구성 요소를 다시 렌더링합니다. 
router.back(): 브라우저의 기록 스택에서 이전 경로로 다시 이동합니다.
router.forward(): 브라우저 기록 스택의 다음 페이지로 이동합니다.

 

 

Next.js 의 튜토리얼에는 useDebounceCallback() 을 포함한 좋은 예문이 있어 후에 참고용으로 옮겨 옵니다.

"use client"
export default function Search({ placeholder }: { placeholder: string }) {
  const searchParams = useSearchParams()
  const pathname = usePathname();
  const router = useRouter();

  // const handleSearch = (value: string)=>{
  //   const params = new URLSearchParams(searchParams)
  //   if (value) {
  //     params.set('query', value);
  //   } else {
  //     params.delete('query');
  //   }
  //   router.replace(`${pathname}?${params.toString()}`);
  // }
  const handleSearch = useDebouncedCallback((value) => {
    console.log(`Searching... ${value}`);
   
    const params = new URLSearchParams(searchParams);
    if (value) {
      params.set('query', value);
    } else {
      params.delete('query');
    }
    // 페이지 이동 '페스네임?파람스는 스트링으로'
    router.replace(`${pathname}?${params.toString()}`);
  }, 300);
  console.log('pathname: ', pathname);

  return (
    <div className="relative flex flex-1 flex-shrink-0">
      <label htmlFor="search" className="sr-only">
        Search
      </label>
      <input
        className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
        placeholder={placeholder}
        onChange={(e) => { handleSearch(e.target.value) }}
        // onChange={(e)=>{console.log(e.target.value)}}
        defaultValue={searchParams.get('query')?.toString()}// useState 없이 함
      />
      <MagnifyingGlassIcon className="absolute peer-focus:text-gray-900 left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 " />
    </div>
  );
}