useLocation

1. 소개

• useLocation은 React Router에서 제공하는 hook으로 현재 페이지의 URL 정보를 가져올 때 많이 쓰인다.

useLocation v6.22.0 | React Router

2. 꿀팁

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

function App() {
  let location = useLocation();

  React.useEffect(() => {
    // Google Analytics
    ga('send', 'pageview');
  }, [location]);

  return (
    // ...
  );
}

• 예시를 보면 useEffect 의존성 배열 안에 location이 있는 것을 알 수 있는데, location이 변하는 값이 아니라면 굳이 의존성 배열 안에 넣어 트리거로 사용할 일이 없다고 생각이 들었다. console.log(location.pathname)을 실행시켜보니 URL이 바뀔 때마다 location이 side-effect를 스스로 일으켜 값이 변하고 있었다. 즉 useState를 사용해 location을 업데이트 안해도 된다는 것이다.
• 메뉴바, 네비게이션바, 헤더 이런 컴포넌트를 설계할 때, 유저가 새로고침 후에도 보고 있었던 탭을 유지하기 위해 useLocation을 쓰면 효과적이다.