[React] url 정보 가져오기: useLocation 훅 사용 예제

리액트로 구현을 진행할 때, 현재 url 정보가 필요한 경우가 있습니다.

이 경우, react router에서 제공하는 useLocation hook을 사용하면 쉽게 구현할 수 있는데요.

이번 글에서는 이 기능에 대해서 간략한 예제를 통해 살펴보도록 하겠습니다.

 

 

사용 예시

다음과 같은 url 예시가 있다고 가정해 보겠습니다.

https://example.com/products?category=shoes&color=red#reviews

여기서 사이트 주소 뒤의 /products 는 경로에 해당하고,

? 뒤에 있는 ?category=shoes&color=red 는 쿼리에 해당하며, 

# 뒤에 있는 #reviews는 해시 값에 해당하는 상황입니다.

 

이 경우, 위의 값들을 다음 코드 예제를 통해 추출할 수 있습니다.

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

function ProductPage() {
  const location = useLocation();

  console.log(location.pathname); // "/products"
  console.log(location.search);   // "?category=shoes&color=red"
  console.log(location.hash);     // "#reviews"  
}

위의 코드에서 useLocation()으로 객체 선언 후,

경로, 쿼리 및 해시 값을 각각 pathname, search, hash 속성에서

추출한 점을 알 수 있습니다.

 

여기서 추가적인 쿼리 문자열을 상세히 파싱하고 싶다면

다음 코드를 추가적으로 적용해볼 수도 있습니다.

const queryParams = new URLSearchParams(location.search);
const category = queryParams.get('category'); // "shoes"
const color = queryParams.get('color');       // "red"

 

useLocation을 사용할 경우, url이 변경되면 컴포넌트가 리렌더링된다는 점을 활용하여

사용자가 페이지 내에서 네비게이션을 할 때 새로운 경로 정보를 반영할 수 있게 해줍니다.

 

이 글이 자주 사용되는 useLocation 훅에 대한 사용법 이해에 도움이 되셨기를 기원하겠습니다.

잘 봐주셔서 감사드립니다.