React Router NavLink로 메뉴 활성 상태 간편하게 처리하기

포트폴리오를 만드는 중, 페이지 이동을 위한 탭 메뉴에서 현재 경로에 맞는 메뉴에만 다른 스타일을 적용하려고 했습니다.

처음에는 location.pathname을 사용해 각 경로에 맞춰 active 클래스를 추가하려 했었습니다.

그러나 이렇게 하면 경로를 추가하거나 변경할 때마다 해당 경로가 맞는지 일일이 확인해야 하는 번거로움이 있었습니다.

예를 들어 /home 경로로 이동할 때는 pathname에 'home'이 포함되어 있는지를 확인하는 조건문을 넣고, 또 다른 경로가 추가되면 그에 맞춰 코드를 수정해야 했습니다.

그러다가  React Router에서 제공하는 NavLink 컴포넌트를 알게 되었습니다.

이 컴포넌트를 사용하면 현재 경로에 맞는 메뉴에 자동으로 스타일을 적용할 수 있었습니다.

NavLink는 내부적으로 경로를 비교해 active 상태를 관리해 주기 때문에, 제가 일일이 pathname을 확인할 필요가 없어진 것입니다.

NavLink 사용법

NavLink의 기본 사용법은 매우 간단합니다. 아래처럼 to 속성에 원하는 경로를 지정해주고, className 속성에 함수를 전달하면 경로가 활성화되었을 때 해당 클래스가 적용됩니다.

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

export default function TabList() {
    const location = useLocation();

    const isRoot = location.pathname === '/';

    return (
        <div className={styles.list}>
            <NavLink
                to="/home"
                className={({ isActive }) => 
                    `${styles.item} ${(isActive || isRoot) ? styles.active : ''}`
                }
            >
                <span>Home</span>
            </NavLink>
            <NavLink
                to="/projects"
                className={({ isActive }) => 
                    `${styles.item} ${isActive ? styles.active : ''}`
                }
            >
                <span>Projects</span>
            </NavLink>
            <NavLink
                to="/blog"
                className={({ isActive }) => 
                    `${styles.item} ${isActive ? styles.active : ''}`
                }
            >
                <span>Blog</span>
            </NavLink>
            <NavLink
                to="/temp"
                className={({ isActive }) => 
                    `${styles.item} ${isActive ? styles.active : ''}`
                }
            >
                <span>Temp</span>
            </NavLink>
        </div>
    );
}

URL 파라미터가 있는 경우 end 속성 사용

현재는 경로에 URL 파라미터가 없어서 isActive만을 사용했지만, URL 파라미터를 무시하고 경로의 정확한 일치만을 원할 경우 end 속성을 추가하여 사용하면 됩니다.

예를 들어 /projects/123처럼 URL 파라미터가 경로에 붙는 상황에서는 end 속성을 사용하여 정확한 경로 일치만 활성화할 수 있습니다.

<NavLink to="/projects" end>
    Projects
</NavLink>

이렇게 end 속성을 추가하면 /projects/123와 같은 경로는 활성화되지 않으며, /projects 경로에만 active 클래스가 적용됩니다.