[React.js] useSearchParams 훅 (React Router)

useSearchParams 훅 (React Router)

들어가며

• 리액트 라우터(React Router)에서 제공하는 useSearchParams 훅에 대해 정리해본다.

 

useSearchParams

개념

• 리액트 라우터(React Router)를 사용하여 URL의 쿼리 파라미터를 읽고 설정하는 데 유용한 도구
• 이 훅을 사용하면 컴포넌트가 URL의 쿼리 스트링을 쉽게 접근하고 조작할 수 있다.
• React Router v6에서 도입되었고, 기존의 useLocation과 useHistory 훅을 결합한 기능을 제공한다.

 

사용법

			
			
			
		
import React from 'react';
import { useSearchParams } from 'react-router-dom';
 
function MyComponent() {
  // 쿼리 파라미터 읽기
  const [searchParams, setSearchParams] = useSearchParams();
 
  // 특정 쿼리 파라미터 값 가져오기
  const paramValue = searchParams.get('paramName');
 
  // 쿼리 파라미터 설정
  const updateSearchParams = () => {
    setSearchParams({ paramName: 'newValue' });
  };
 
  return (
    <div>
      <p>Current param value: {paramValue}</p>
      <button onClick={updateSearchParams}>Update Param</button>
    </div>
  );
}

 

1. 쿼리 파라미터 읽기
   • searchParams는 URLSearchParams 객체이다.
   • 따라서, get, getAll, has, keys 등의 메서드를 사용할 수 있다.
2. 쿼리 파라미터 설정
   • setSearchParams 함수는 새로운 URLSearchParams 객체를 인자로 받는다.
   • 기존의 쿼리 파라미터를 덮어쓰게 된다.
3. 쿼리 파라미터 변경
   • setSearchParams는 객체나 URLSearchParams 객체를 인자로 받을 수 있다.
   • 변경하고 싶은 쿼리 파라미터를 키-값 쌍으로 전달하면 된다.
4. 다중 쿼리 파라미터
   • 여러 쿼리 파라미터를 동시에 설정하거나 변경할 수 있다.

 

예제 코드

• URL의 param1과 param2를 읽고, 버튼을 클릭하여 각각의 읽어온 값들을 새로운 값으로 업데이트하기

			
			
			
		
import React from 'react';
import { useSearchParams } from 'react-router-dom';
 
function MultiParamsComponent() {
  const [searchParams, setSearchParams] = useSearchParams();
 
  const updateMultipleParams = () => {
    setSearchParams({ param1: 'value1', param2: 'value2' });
  };
 
  return (
    <div>
      <p>Param1: {searchParams.get('param1')}</p>
      <p>Param2: {searchParams.get('param2')}</p>
      <button onClick={updateMultipleParams}>Update Params</button>
    </div>
  );
}

 

참고

• 다음과 같이 브라우저에서  기본적으로 제공하는 URL() 메서드를 이용하여 요청된 URL의 파라미터 값을 가져올 수 있다.

			
			
			
		
import AuthForm from '../components/AuthForm';
 
function AuthenticationPage() {
  return <AuthForm />;
}
 
export default AuthenticationPage;
 
export async function action({ request }) {
  const searchParams = new URL(request.url).searchParams; // 브라우저에서 기본으로 제공하는 함수
  const mode = searchParams.get('mode') || 'login';
 
  const data = await request.formData();
  const authData = {
    email: data.get('email'),
    password: data.get('password'),
  };
}

 

 

참고 사이트

useSearchParams v6.24.1 | React Router