[React.js] useSearchParams 훅

useSearchParams 훅

들어가며

• 리액트 라우터(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