React-Router와 Active Link

Title: 활성 링크와 React-Router: React-Router v4에서 시작하는 활성 링크 방법

React-Router는 React 애플리케이션에서 네비게이션과 URL 라우팅을 쉽게 처리할 수 있게 해주는 인기있는 라우팅 라이브러리입니다. 활성 링크를 가지는 것은 애플리케이션의 현재 페이지 또는 섹션을 나타내는 일반적인 요구사항입니다. 이 블로그 포스트에서는 React-Router 버전 4에서 활성 링크를 시작하는 방법을 알아보겠습니다.

React-Router v4에서 NavLink 사용하기

이전 버전의 React-Router에서는 Link 컴포넌트로 activeClassName 또는 activeStyle 속성을 사용하여 활성 링크를 사용자 정의할 수 있었습니다. 그러나 이러한 속성들은 React-Router v4에서 더 이상 사용할 수 없습니다. 대신에 조건부 스타일링을 위한 기능을 제공하는 NavLink 컴포넌트를 사용할 수 있습니다.

활성 링크로 시작하려면 코드에서 Link 컴포넌트를 NavLink로 대체해야 합니다. 다음은 예시입니다:

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact activeClassName='is-active' to='/'>Home</NavLink>
        <NavLink activeClassName='is-active' to='/about'>About</NavLink>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

위의 코드에서 우리는 Link 컴포넌트를 NavLink로 대체하고 HomeNavLink에 activeClassName 속성을 추가했습니다. HomeNavLink에 exact prop을 사용하면 현재 URL 경로가 to prop에서 지정한 경로와 정확히 일치할 때만 활성 상태로 유지됩니다. 이렇게 함으로써 Home 페이지가 로드될 때만 HomeNavLink가 활성 상태로 유지됩니다.

React-Router v6 접근 방식

React-Router v6을 사용하는 경우 접근 방식이 약간 다릅니다. v6에서는 NavLink 컴포넌트가 Link 컴포넌트로 대체되었으며, 활성 링크 스타일은 className과 isActive 속성을 사용하여 구현할 수 있습니다.

다음은 React-Router v6에서 커스텀 NavLink 컴포넌트를 사용하는 예시입니다:

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

const CustomNavLink = ({ to, title }) => {
   let resolved = useResolvedPath(to);
   let match = useMatch({ path: resolved.pathname, end: true });

   return (
      <NavLink to={to} className={`d-flex align-items-center py-2 px-4 ${match ? 'cta-btn' : 'c-n-b-link'}`} >
        <span className='ms-1 f-w-600'>{title}</span>
      </NavLink>
)
}

위의 코드에서 우리는 react-router-dom 패키지에서 제공하는 NavLink 컴포넌트를 사용하여 CustomNavLink 컴포넌트를 정의합니다. useMatch와 useResolvedPath 훅을 활용하여 현재 경로가 지정된 경로와 일치하는지 여부를 확인합니다. 이에 따라 활성 링크 스타일을 위해 적절한 className을 적용합니다.

결론

React-Router v4 또는 v6에서 활성 링크로 시작하는 것은 적절한 컴포넌트와 속성을 사용하여 달성할 수 있습니다. React-Router v4에서는 NavLink 컴포넌트와 activeClassName 속성을 사용할 수 있습니다. React-Router v6에서는 Link 컴포넌트를 활용하고 커스텀 NavLink 컴포넌트를 구현하여 활성 링크 스타일링을 달성해야 합니다.

이 블로그 포스트의 지침을 따라가면 React 애플리케이션의 사용자 경험을 향상시킬 수 있도록 활성 링크가 올바르게 스타일링됩니다.

참고 자료 : 

reactjs