[React] React Router <NavLink>를 활용한 탭 메뉴 구현하기

React Router의 공식문서를 살펴보면 <NavLink>를 아래와 같이 설명하고 있습니다.

 

A <NavLink> is a special kind of <Link> that knows whether or not it is "active". This is useful when building a navigation menu such as a breadcrumb or a set of tabs where you'd like to show which of them is currently selected.

 

의미를 살펴보면 <NavLink>는 acitve 인지 여부를 알려주는 특별한 종류의 <Link>이며, 브레드크럼 또는 현재 선택된 메뉴가 표시된 탭 메뉴와 같은 탐색 메뉴를 만들 때 유용하다는 것을 알 수 있습니다.

 

진행했던 프로젝트에서도 최상단의 탭 메뉴 중 현재 선택된 메뉴가 어떤 메뉴인지를 표시하는 기능을 구현하려 했기 때문에 <Link>가 아닌 <NavLink>를 활용하여 최상단 탭 메뉴를 구현하였습니다.

 

<NavLink> 사용 방식은 다음과 같습니다.

 

<NavLink>는 to라는 props를 통해 이동 경로를 설정할 수 있으며, active인지 표시하기 위해 props로 className이나 style을 전달할 수 있습니다.

className이나 style을 설정하기 위해 각 props에는 { isActive }라는 인자를 가지는 콜백함수를 전달해야 하는데, 이 때 isActive는 boolean type이기 때문에 true인지 false인지에 따라 다른 className 또는 style을 설정할 수 있습니다.

 

const Header = () => {
	const menus = [
		{ id: 0, menu: '면접 질문', url: '/interview/question' },
		{ id: 1, menu: '스터디모집', url: '/study' },
	];

	return (
		<HeaderContainer>
			<Link to="/">
				<LogoImg />
			</Link>
			<ul>
				{menus.map((menu) => {
					return (
						<li key={menu.id}>
							<NavLink
								to={menu.url}
								className={({ isActive }) => (isActive ? 'active' : undefined)}
							>
								{menu.menu}
							</NavLink>
						</li>
					);
				})}
			</ul>
		</HeaderContainer>
	);
};

export default Header;