영화 예매사이트 프로젝트를 했을 때, 카테고리 탭을 만들기 위해 NavLink 사용방법에 대해 공부를 했었었다!
Nav 바를 만들 때 React-router-dom을 사용해 NavLink를 이용해 만들곤 한다.
NavLink는 Link태그와 다르게 브라우저의 URL이 'to' 에 지정된 URL과 일치할 시, 특정 스타일을 적용할 수 있고, Route의 path 처럼 동작하기 때문에 end 키워드가 있다. 사용 방법이 간단하고 내장되어있는 active 스타일로 활성화 조건 스타일링을 주기가 너무 편해 한 번 사용하게 된 뒤로 잘 쓰고있는 기능이다.
NavLink의 사용방법과 가장 궁금했던 end의 의미에 대해 파헤쳐보는 시간을 가져볼 것이다.
NavLink 사용방법
const NavBar = () => {
const myNav = [
{
id: 1,
path: '/id',
title: '글',
},
{
id: 2,
path: 'series',
title: '시리즈',
},
{
id: 3,
path: 'about',
title: '소개',
},
];
return (
<NavContainer>
<div className='nav'>
{myNav.map(nav => {
return (
//Link 태그와 사용방법이 비슷하지만, 다른 점은 end 키워드다.
<MyNavBar key={nav.id} to={nav.path} end={nav.id === 1} className={({ isActive }) => (isActive ? 'active' : '')}>
{nav.title}
</MyNavBar>
);
})}
</div>
</NavContainer>
);
};
const NavContainer = styled.div``;
const MyNavBar = styled(NavLink)`
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
width: 8rem;
height: 3rem;
border: 1px solid transparent;
color: var(--text2);
text-decoration: none;
transition: color 0.25s ease-in-out 0s;
font-weight: 600;
font-size: 1.325rem;
:hover {
color: var(--text1);
}
&.active {
color: var(--primary2);
}
`;
export default NavBar;NavLink의 end
어쨌든 나는 NavLink의 사용 방법은 알지만 end의 의미에 대해 궁금했다.end를 주는 곳은 우리 눈에 제일 처음으로 보이는 페이지에 주면 되는데 왜 그런지 궁금했다. 아무리 구글링을 해봐도 사용방법은 알려주지만 자세한 설명까진 알려주지 않는다. 내가 파헤쳐보기로 한다.
공식 문서를 살펴보면,
If the end prop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched. For example, to render a link that is only active at the website root and not any other URLs, you can use:
<NavLink to="/" end> Home </NavLink>
무슨 말이냐 하면,
end를 사용하면 하위 경로가 일치할 때 이 component가 'active'로 일치하지 않도록 한다.
website의 root path에서만 활성화 된다.
그런데 이게 무슨 말인지 이해를 못하겠다. 일단 우리는 NavLink는 root PATH에 작용한다는 사실을 기억하고 있으면 된다.
예시 코드를 들어서 설명하자면,
<NavLink to='/id' end>글</NavLink>
<NavLink to='series'>시리즈</NavLink>
<NavLink to='about'>소개</NavLink>
여기서 왜 end를 root path에만 주었고 어떤 의미인지 정확하게 알 수 있다.
우리에게 처음 보여지는 페이지는 글 페이지다. 그 페이지의 path는 /id고 시리즈와 소개 네브 바를 클릭해서 이동하게 되면 /id/series /id/about으로 이동을 하게 된다. 항상 페이지를 이동해도 /id는 남아있지 않은가! 그렇게 된다면 중복되는 path인 /id의 요소가 우리 눈에 보이지 않지만 같이 랜더링 된 것이다. end를 써줌으로써 불필요한 랜더링을 하지 않게 해준다. 이게 내가 궁금한 포인트였다. 그래서 end를 써주는 것이다!!!!!!!!
end를 NavLink 모든 path에 다 주어도 문제는 발생하지 않지만 불필요한 것이다.
2달 간의 궁금증이 풀렸다.
번외
이 글에서 계속 강조한 말이 있다. NavLink는 root PATH에 작용한다는 사실을 기억하고 있으면 된다고.
이번에 블로그 프로젝트를 진행 하게 되며 다시 상기하게 된 부분이다.
이번 프로젝트를 진행하면서,
내 블로그 > 글 > 태그목록 태그 목록을 구현하는데 NavLink를 사용했다. 그런데 스타일 active가 원하는 대로 적용되지 않았다. 처음에는 end 때문인줄 알았지만 생각해보면 태그 목록에서는 path 이동을 하지 않는다. 그래서 발생한 문제다! 태그 목록은 쿼리스트링을 받아서 주소가 변경되기 때문에 쿼리가 바뀔 때마다 className이 바뀌거나 active를 활성화 할 수 있는 조건을 주어서 사용할 수 있어야한다.
이건 다음 글에서 😎
