[javascript] 리액트 라우터의 네비게이션 링크 처리 방법

04 Dec 2023

javascript

리액트 라우터는 싱글 페이지 애플리케이션(Single Page Application, SPA)에서 페이지 간의 네비게이션을 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. 네비게이션 링크를 처리하기 위해 리액트 라우터에서 제공하는 Link 컴포넌트를 사용할 수 있습니다.

`Link` 컴포넌트 사용하기

Link 컴포넌트는 HTML의 <a> 태그와 유사한 역할을 합니다. 하지만 <a> 태그와는 다르게 페이지 전체를 새로고침하지 않고 컴포넌트를 교체하도록 돕습니다.

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
        <li>
          <Link to="/contact">문의</Link>
        </li>
      </ul>
    </nav>
  );
}

위의 예제 코드에서는 Link 컴포넌트를 사용하여 네비게이션 링크를 구성하였습니다. to 속성에는 연결할 경로를 지정합니다. 클릭 시 해당 경로로 이동하게 됩니다.

네비게이션 링크 활성화

리액트 라우터에서는 현재 활성화된 링크를 시각적으로 표시하는 기능을 제공합니다. 이를 위해 NavLink 컴포넌트를 사용할 수 있습니다.

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/" activeClassName="active">홈</NavLink>
        </li>
        <li>
          <NavLink to="/about" activeClassName="active">소개</NavLink>
        </li>
        <li>
          <NavLink to="/contact" activeClassName="active">문의</NavLink>
        </li>
      </ul>
    </nav>
  );
}

위의 예제 코드에서는 NavLink 컴포넌트를 사용하여 활성화된 링크에 active 클래스를 추가하도록 하였습니다. 이를 통해 CSS 스타일링을 통해 현재 활성화된 링크를 구별할 수 있습니다.

요약

리액트 라우터에서 Link 컴포넌트를 사용하면 네비게이션 링크를 쉽게 처리할 수 있습니다. 또한 NavLink 컴포넌트를 사용하면 현재 활성화된 링크를 시각적으로 표시할 수 있습니다. 이를 활용하여 사용자가 페이지 간을 이동할 때 편리한 경험을 제공할 수 있습니다.

Link 컴포넌트 사용하기

네비게이션 링크 활성화

요약

참고 자료

`Link` 컴포넌트 사용하기