react-router Link와 NavLink 사용 방법

react-router Link와 NavLink 사용 방법

link

라우팅을 사용하면서 URL을 수동으로 변경하는 방법으로만 해당 페이지를 탐색하지는 않는다.

우리가 클릭할 수 있는 링크를 페이지에 넣고 이동하는 것이 일반적이다.

일반적으로 링크를 사용할 때 아래와 같이 a태그를 이용한다.

const MainHeader = () => {
  return (
    <header>
      <nav>
        <ul>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/products">Products</a>
          </li>
        </ul>
      </nav>
    </header>
  );
};
export default MainHeader;

실제로 두 페이지 사이를 탐색하지만 이는 새 페이지를 로드한다.

링크 중 하나를 클릭할 때마다 여기에 이 HTML 파일이 새로 로드되며 이 애플리케이션에서 가질 수 있는 애플리케이션 상태를 잃게 되는 것이다.

이는 SPA를 구축한다는 개념에 반대되는 내용이고 최적의 사용자 경험이 될 수 없다.

이 앵커 태그에 클릭 리스너를 추가하여 브라우저 기본값을 막고 수동으로 반응 라우터가 올바른 컴포넌트를 로드하도록 할 수도 있지만 react-router dom의 Link 컴포넌트를 사용하면 된다.

앵커 태그를 Link로 대체 할 수 있으며 href 속성 대신 to를 사용한다.

여기에는 여전히 앵커 태그가 있지만 Link 컴포넌트에 의해 렌더링 된 앵커 태그이며, 내부적으로 라우터에 반응한다.

해당 링크의 클릭을 수신하고 기본값을 유지하는 대신 URL을 수동으로 업데이트한다.

상태가 유지되면서 사용자에게 다른 페이지로 바뀐다는 생각을 들게 한다.

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

const MainHeader = () => {
  return (
    <header>
      <nav>
        <ul>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/products">Products</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
};
export default MainHeader;

NavLink

종종 네비게이션에서 활성된 링크를 강조 표시하는 경우가 있다.

이제 활성 항목이 강조 표시되도록 스타일을 추가해도 적용되지않는다.

활성 링크를 강조 표시하기 위해서 리액트 라우터에는 NavLink 컴포넌트를 사용할 수 있다.

NavLink를 사용하여 표준 링크를 대체할 수 있고 NavLink는 기본적으로 Link처럼 작동한다.

추가할 클래스를 NavLink에 알려 주기만 하면 되는데 activeClassName prop을 추가한다.

import { NavLink } from "react-router-dom";
import classes from "./MainHeader.module.css";

const MainHeader = () => {
  return (
    <header className={classes.header}>
      <nav>
        <ul>
          <li>
            <NavLink activeClassName={classes.active} to="/abount">
              Abount
            </NavLink>
          </li>
          <li>
            <NavLink activeClassName={classes.active} to="/products">
              Products
            </NavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
};
export default MainHeader;