[React] useLocation Hook을 이용한 url 주소 마지막 값 추출

주소의 마지막 값을 받아 공통 컴포넌트에 전달하는 로직이 있었다.

1. 마지막 주소값 추출 기존 코드

위처럼 라우팅 구분의 길이가 모두 달라서,

원래의 코드에서는

useEffect hook을 이용해 렌더링이 일어날 때 마다

document 객채의 현재 주소값을 가져와,

문자열 / 를 기준으로 나눈 뒤

마지막 값의 문자열을 가져와 state 값에 저장을 시켰다.

	const [currentLastUrl, setCurrentLastUrl] = useState(null);

    useEffect(() => {
        const url = document.location.href;
        const splitUrl = url.split('/');
        const location = splitUrl[splitUrl.length - 1];
        setCurrentLastUrl(location);
        }

그러나 이 방법은 랜더링이 일어나는 모든 시점에 불필요하게 작동했고,

불필요한 추가 연산이 들어갔다.

2. useLocation Hook 을 적용한 코드

useLocation hook 은 location 객체를 반환하며, 이 객체는 현재 사용자가 보고있는 페이지의 정보를 지니고 있다.

자세히 살펴보자면,

* useLocation Hook

useLocation Hook을 콘솔로 찍어보면 다음과 같이 출력된다.

• hash : 주소의 # 문자열 뒤의 값 (주로 History API가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용)
• key : location 객체의 고유 값, 초기에는 default 이고, 페이지가 변경될 때마다 고유의 값이 생성됨.
• pathname : 현재 주소의 경로 (쿼리스트링 제외)
• search : 맨 앞의 ? 문자를 포함한 쿼리스트링 값
• state : 페이지로 이동할 때 임의로 넣을 수 있는 상태 값
  출처 - React router V6 튜토리얼

그래서 react router v6 의 useLocation hook을 사용하여 다음과 같이 코드를 개선했다.

    const locationHook = useLocation();
	const [currentLastUrl, setCurrentLastUrl] = useState(null);

    useEffect(() => {
        const splitUrl = locationHook?.pathname?.split('/') ?? null;
        const location =
            splitUrl?.length > 1 ? splitUrl[splitUrl.length - 1] : null;
        setCurrentLastUrl(location);
    }, [locationHook]);

빈 값이나 length 계산의 에러방지를 위해, Optional chaining 과 Nullish coalescing operator 를 추가로 넣어줬다.

useEffect의 dependency를 정확하게 걸어주어서 필요할 때만 로직이 실행되고,
그에 따라 랜더링을 최적화 할 수 있었다.