Link와 NavLink 차이

react에서 router 처리를 할 때, Link, Nav 두 컴포넌트를 자주 사용합니다.

정확한 이해없이 사용했던 것 같아 공식 문서를 바탕으로 특징 및 차이점을 정리해보았습니다.

💡 공통점과 차이점

Link와 Nav 두 컴포넌트 모두 화면에 태그로 렌더링 되고, to 속성에 정의해 둔 url로 이동하는 기능을 한다는 점에서 동일합니다.

공식문서에서는 NavLink에 관해 아래와 같이 정의되어 있습니다.

NavLink 는 Link의 특별한 버전입니다.
현재 URL과 클릭시 이동할 URL이 같을 경우, "style 속성" 을 추가해주는 기능을 가지고 있습니다.
스타일 외에도 추가 기능으로 선택된 NavLink의 경우 aria-current="page" 로 지정되어, 접근성에 도움이 됩니다.

즉, NavLink는 특정 링크에 스타일을 넣어 줄 수 있다.
⭐⭐⭐ 이것이 바로 Link와 NavLink의 가장 큰 차이점이다.

📃 NavLink 활용 예시

예를 들어 네비 메뉴에 여러 링크 메뉴가 있고, 현재 활성화된 메뉴에 다른 css를 적용하고 싶을 때 사용.

이때 사용되는게 activeStyle과 activeClassName 속성이다.
리액트 웹의 현재 URL과 to가 가리키는 링크가 일치할 때, activeStyle과 activeClassName이 활성화 되고 일치하지 않으면 비활성화가 된다.

예시

// NavLink
<NavLink to="/about">About</NavLink>

// activeClassName 속성 
<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>
  
// activeStyle 속성
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: "bold",
    color: "red"
  }}
>
  FAQs
</NavLink>

🔥따로 함수를 만들어서도 사용가능하다!!

function getLinkStyle({ isActive }) {
  return {
    textDecoration: isActive ? "underline" : "",
    color: isActive ? "#4cafc8" : "",
  };
}

function Navigation() {
  return (
    <div className={styles.nav}>
      <Container className={styles.container}>
        <Link to="/">코드스터디</Link>
        <ul className={styles.menu}>
          <li>
            <NavLink styles={getLinkStyle} to="/">
              홈
            </NavLink>
          </li>
          <li>
            <NavLink style={getLinkStyle} to="/my-feed">
              내 피드
            </NavLink>
          </li>
        </ul>
      </Container>
    </div>
  );
}