2024.02.29 TIL

useSearchParams()과 useLocation()

• React Router 라이브러리에서 제공하는 Hook
• URL 쿼리 스티링을 관리하는 데 유용하게 사용

useLocation()

• 현재 브라우저의 위치(location)을 반환
• 현재 URL의 정보를 담고 있으며, 경로(pathname), 검색 쿼리(search), 해시(hash) 등의 정보를 포함
• useLocation은 라우트가 변경될 때마다 해당 위치 객체를 업데이트하여 반환

import { useLocation } from 'react-router-dom';

function TestComponent () {
  const location = useLocation();

  console.log(location.pathname); // 현재 경로
  console.log(location.search);   // URL의 쿼리 스트링
  console.log(location.hash);     // URL의 해시 값

  return <div>...</div>
}

useSearchParams()

• URL의 쿼리 스트링을 읽고 쓰기 위한 인터페이스를 제공
• URL의 쿼리 스트링을 쉽게 파싱하고, 쿼리 파라미터를 수정할 수 있다
• [searchParams, setSearchParams] 형태의 배열을 반환
• searchParams는 URLSearchParams 인터페이스의 인스턴스
• setSearchParams는 이 쿼리 파라미터를 업데이트하는 함수

import { useSearchParams } from 'react-router-dom';

function TestComponent() {
  const [searchParams, setSearchParams] = useSearchParams();

  const value = searchParams.get('key'); // 'key' 쿼리 파라미터의 값을 가져옴

  // 쿼리 파라미터를 설정하는 함수
  const setQueryParams = () => {
    const newSearchParams = new URLSearchParams(searchParams);
    newSearchParams.set('key', 'newValue');
    setSearchParams(newSearchParams);
  };

  return (
    <div>
      <p>Key: {value}</p>
      <button onClick={setQueryParams}>쿼리 파라미터 수정</button>
    </div>
  );
}