[React] useLocation vs Global location

https://stackoverflow.com/questions/71979474/what-is-the-benefit-of-usage-uselocation-hook-uselocation-vs-global-location
기본적으로 해당 글을 번역한 내용이다.

import React from 'react'

const App = () => {
	console.log(location.pathname);
  
    return <></>;
}

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

const App = () => {
	const location = useLocation();
    console.log(location.pathname);
  
    return <></>;
}

첫번째 구문의 location은 전역 객체에 존재하는 객체이다.
두번째 구문의 location은 useLocation 훅을 통해 반환되는 객체이다.

이 두 구문의 차이를 이해하기 위해서는 variable과 state, plain javascript function과 React hook의 차이를 알아야 한다.

const foo = 'bar';  // variable
const [foo, setFoo] = useState('bar');  // state

const foo = fooFunc;  // plain javascript function
const foo = useFooFunc();  // React hook

첫번째 예제의 variable foo는 state가 아니기 때문에, 리액트에서 그 변화를 감지하지 못한다. 이로 인해 해당 값이 변경되더라도 리렌더가 발생하지 않는다. 때문에 리액트 내부에서 해당 값을 추적하고 활용하기 위해서는 variable이 아닌 state로 작성해야 한다.

두번째 예제의 경우 plain javascript function을 리액트 내부에서 사용하는 것은 전혀 문제가 되지 않는다. 하지만, 해당 함수 내부에서 리액트 훅을 활용해야 하는 경우 문제가 발생한다.

global location은 variable 혹은 plain javascript function처럼 리액트의 관리 영역 외부에 존재 한다. 즉 해당 값의 변화를 리액트에서는 파악하지 못하는 경우가 생길 수도 있음을 의미한다. 반면 useLocation 훅에 의해 반환되는 location 객체는 리액트의 관리 영역 내부에 존재 (react-router-dom 자체가 react를 사용하기 때문에) 하기 때문에 이러한 문제로부터 자유롭다.
즉, 리액트를 사용하는 경우 global location 사용을 지양하고 useLocation 훅에 의해 반환되는 location 객체를 사용하자.