[React.js] <Link> 컴포넌트와 <NavLink> 컴포넌트 비교 (React Router)

<Link> 컴포넌트와 <NavLink> 컴포넌트 비교 (React Router)

들어가며

• 리액트 라우터(React Router)에서 @<Link>@ 컴포넌트와 @<NavLink>@ 컴포넌트의 차이점에 대해 정리해본다.

 

<Link> 컴포넌트

개념

• 리액트 라우터에서 제공하는 가장 기본적인 링크(Link) 컴포넌트
• 특정 경로로 이동할 수 있는 내비게이션 링크를 생성한다.
• HTML의 @<a>@ 태그와 유사하지만, 페이지 새로고침 없이 SPA(Single Page Application) 내에서 라우팅을 처리한다.

 

특징

• 페이지를 새로 고침하지 않고, 클라이언트 측 라우팅을 수행한다.
• 단순한 라우팅에 적합하다.
• 선택된 상태에 따른 스타일링 기능은 없다.

 

사용 예시 코드

import { Link } from "react-router-dom";

function App() {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </div>
  );
}

 

<LavLink> 컴포넌트

개념

• @<Link>@ 컴포넌트의 확장형으로, 활성화 상태(Active State)를 처리하는 기능이 추가되었다.
• 현재 경로와 링크 경로가 일치하면, 기본적으로 @active@ 클래스가 추가된다.
• 따라서 내비게이션 링크의 활성화 상태를 스타일링할 수 있다.

 

특징

• 현재 URL 경로와 비교하여 링크가 활성화되었는지 판단한다.
• @className@이나 @style@을 동적으로 설정할 수 있는 콜백 함수(Callback Function)를 지원한다.
• 주로 내비게이션 메뉴를 구성할 때 사용한다.

 

주요 Props

• @to@ : 이동할 경로 (필수)
• @className@ : 활성화 상태에 따라 동적 클래스를 적용할 수 있는 속성
• @style@ : 활성화 상태에 따라 동적 스타일을 적용할 수 있는 속성
• @end@ : 경로가 완전히 일치할 때만 활성화되도록 설정

 

부모 경로(@/dashboard@)와 하위 경로(@/dashboard/profile@, @/dashboard/wallets@ 등)가 모두 활성화 상태로 간주되지 않도록 하려면, @<NavLink>@ 컴포넌트에 @end@ Prop을 설정해주면 된다.

 

사용 예시 코드

import { NavLink } from "react-router-dom";

function App() {
  return (
    <nav>
      <NavLink to="/" end>
        {({ isActive }) => (
          <span style={{ color: isActive ? 'red' : 'blue' }}>Home</span>
        )}
      </NavLink>
      <NavLink to="/about" className={({ isActive }) => isActive ? 'active-link' : ''}>
        About
      </NavLink>
    </nav>
  );
}

 

 

@<NavLink>@ 컴포넌트는 @<Link>@ 컴포넌트와 유사하나, 링크의 활성화 상태(Active State)를 처리해줄 수 있다는 차이점이 있다.

 

 

참고 사이트

Link | React Router

NavLink | React Router

React Router Dom v6 shows active for index as well as other subroutes