[React] useLocation 으로 쿼리 파라미터 취득 방법(URLSearchParams 활용)

# 리액트: 쿼리 파라미터 취득 방법 by useLocation

GET 방식으로 http://경로?키=값 형태로 접속시, 쿼리 스트링 취득하는 방법은 아래와 같다.

 

 

1. useLocation() 으로 search 취득

- search 속성에 "?키=값&키=값" 이 저장되어 있다.

- {pathname: '/query', search: '?id=10&count=2022', hash: '', state: null, key: 'default'}

 

 

2. URLSearchParams 객체 생성

- search 속성의 값을 URLSearchParams  객체로 생성한다.

- new URLSearchParams(useLocation().search)

 

3. URLSearchParams객체.get("키") 로 쿼리 취득

- 키에 해당하는 값만 반환한다.

 

 

 

만약 http://경로?id=10&count=2022 로 접속한 경우, 아래 코드처럼 쿼리를 취득할 수 있다.

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

// http://localhost:3000/query?id=10&count=2022 로 접속 상황
function Query() {
  // useLocation() 호출
  const location = useLocation();
  console.log(location);
  // {pathname: '/query', search: '?id=10&count=2022', hash: '', state: null, key: 'default'}

  // search 부분을 URLSearchParams 객체로 생성
  const searchParams = new URLSearchParams(location.search);
  // const searchParams = new URLSearchParams(useLocation().search); // 이것도 가능

  // 쿼리 취득
  const id = searchParams.get('id'); // id 취득
  const count = searchParams.get('count'); // count 취득
  console.log('id: ', id); // id: 10
  console.log('count: ', count); // count: 2022
  
  return <div>Query</div>;
}

export default Query;

---

페이지 이동 시, 컴포넌트 간에 파라미터를 전달/취득하는 방법은 아래 글 참고

[React] Router v6: useNavigate() 파라미터 전달&취득 방법 - useLocation()