React: React Router의 `useLocation`

React Router의 useLocation

• React Router의 useLocation 훅은 현재 URL의 위치 정보를 읽어와 컴포넌트 내에서 활용할 수 있게 해줍니다.

  • 주로 라우트가 변경될 때마다 실행되는 사이드 이펙트 관리나, 쿼리 스트링(search)·해시(hash)·state 등을 읽어야 할 때 사용합니다.

• useLocation을 활용하면, URL 변화에 따른 여러 로직(스크롤, 쿼리 파싱, 상태 전달 등)을 쉽게 다룰 수 있습니다.

1. 기본 사용법

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

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

  console.log(location);
  // {
  //   pathname: '/about',
  //   search: '?user=ahn',
  //   hash: '#section1',
  //   state: { from: '/' },
  //   key: 'abc123'
  // }

  return (
    <div>
      <h2>현재 경로: {location.pathname}</h2>
      <p>쿼리: {location.search}</p>
      <p>해시: {location.hash}</p>
    </div>
  );
}

• pathname: /about 같은 경로 문자열

• search: ?key=value 형태의 쿼리 문자열

• hash: #section 같은 해시 문자열

• state: <Link to={{ pathname: '/path', state: { ... } }} /> 같은 방식으로 전달한 상태 객체

• key: 이 위치 고유의 식별자

2. 쿼리 파라미터 꺼내기

• location.search는 문자열 형태로 반환되므로, URLSearchParams를 이용해 파싱합니다.

function QueryComponent() {
  const { search } = useLocation();
  const params = new URLSearchParams(search);
  const user = params.get('user');

  return <div>사용자: {user}</div>;
}

3. 라우트 변경 감지하기

• 의존성 배열에 location(또는 location.pathname)을 넣으면, 경로가 바뀔 때마다 useEffect가 실행됩니다.

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

function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

• 위 컴포넌트를 라우터 최상위에 배치하면, 페이지 전환 시 맨 위로 스크롤됩니다.

4. state 활용하기

• 페이지 이동 시 추가 정보를 함께 넘기고 싶다면 Link나 프로그래밍 내비게이션에서 state를 전달할 수 있습니다.

// 이동하는 쪽
<Link
  to={{
    pathname: '/detail',
    state: { fromList: true }
  }}
>
  상세보기
</Link>

// 받는 쪽
function Detail() {
  const { state } = useLocation();
  return <div>리스트에서 왔나요? {state?.fromList ? '네' : '아니요'}</div>;
}

5. 주의사항

1. 리렌더링

   • location 객체 자체가 바뀔 때(쿼리·해시·state 포함)마다 훅이 리렌더링됩니다. 필요한 속성만 디펜던시로 사용하세요.

2. 상태 관리

   • state를 너무 무겁게 쓰면 URL 없이 중요한 데이터를 넘기는 셈이니, 새로고침 후 사라질 수 있다는 점을 염두에 두세요.

3. SSR 환경

   • 서버 사이드 렌더링에서는 window가 없으므로, useLocation이 동작하기 전 if (typeof window === 'undefined') return; 같은 가드가 필요할 수 있습니다.