[React] React 쿼리 파라미터 추출하는 법

개요

프론트엔드 개발을 하다 보면 쿼리 파라미터 값을 추출해야 할 때가 있다.

URLSearchParmas() 방법만 알고 있었는데 UMC 웹 스터디를 진행하면서 useLocation을 알게 되었다.  

 

방법1. useLocation()사용

useLocation은 현재 페이지 경로 정보 객체를 반환하는 react-router-dom 함수다

search 속성에 쿼리 파라미터 정보가 있으니 이를 사용하면 된다.

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

function MyComponent() {
  // useLocation 훅을 사용하여 현재 경로 정보를 가져옴
  const location = useLocation();

  // search 속성을 통해 쿼리 파라미터 문자열을 얻음
  const queryParams = new URLSearchParams(location.search);

  // 쿼리 파라미터 이름을 이용하여 값 추출
  const paramValue = queryParams.get('paramName');

  return (
    <div>
      <h2>My Component</h2>
      <p>QueryParam: {paramValue}</p>
    </div>
  );
}

export default MyComponent;

 

방법 2. URLSearchParams() 사용

 const [searchParams] = useSearchParams();
 const title = searchParams.get('name');

위에서 선언해주고 원하는 쿼리(여기서는 name)값을 가져오면 된다.