React - useLocation( ), useSearchParams( )

useLocation( )

Hook 중 하나이다.
location 객체를 반환

• pathname: 현재 주소의 경로(쿼리스트링 제외)
• search: 맨 앞의 ? 문자를 포함한 쿼리스트링 값
• hash: 주소의 # 문자열 뒤의 값
• state: 페이지로 이동할 때 임의로 넣을 수 있는 상태 값
• key: location 객체의 고유값, 초기에는 default이며 페이지가 변경될 때마다 고유의 값이 생성
  
  
  ex)
  주소 http://localhost:3000/about/?detail=true&mode=1

const location = useLocation();
console.log(location);
// 출력
// {
//    pathname: '/about/',
//    search: '?detail=true&mode=1',
//    hash: '',
//    state: null,
//    key: 'default'
// }

useLocation은 파싱하는 것이 번거롭다.
다행히, 라우터 v6부터 useSearchParms라는 hook으로 쿼리스트링을 쉽게 다룰 수 있다.

useSearchParams( )

ex)
http://localhost:3000/about/?detail=true&mode=3

const [searchParms, useSearchParms] = useSearchParams();
const a = searchParms.get('detail');
const b = searchParms.get('mode');
console.log('a: ', a); // true
console.log('b: ', b); // 3

주의사항

쿼리파라미터를 조회할 때 값은 무조건 문자열 타입
필요에 따라 타입을 변환해서 사용해야 한다.