React Link 컴포넌트

HTML의 a태그라고 할 수 있는 Link 컴포넌트에 대해서 알아보자.

참고링크
https://reactrouter.com/en/6.14.1/components/link

React Router에서 제공하는 NavLink와 Link는 URL을 생성하고 애플리케이션 내에서 내부 링크를 생성하는 데 사용되는 컴포넌트입니다. 이 두 컴포넌트는 React Router를 사용하여 라우팅된 애플리케이션에서 네비게이션을 처리하는 데 도움을 줍니다.

NavLink

NavLink 컴포넌트는 현재 URL과 매칭되는 경우에 자동으로 활성화되는 스타일을 적용할 수 있는 내부 링크를 생성합니다.

NavLink는 to prop을 사용하여 내부 링크의 대상 경로를 지정합니다.
NavLink는 현재 URL의 경로와 to prop의 경로가 일치하면 자동으로 활성화된 스타일을 적용할 수 있습니다.

NavLink는 활성화된 링크에 대한 스타일링을 지원하고, 사용자가 활성화된 링크를 클릭할 때 추가적인 동작을 수행할 수 있는 기능도 제공합니다.

---

Link

Link 컴포넌트는 단순한 내부 링크를 생성합니다.
Link는 to prop을 사용하여 내부 링크의 대상 경로를 지정합니다.

Link를 클릭하면 to prop에 지정된 경로로 애플리케이션 내에서 페이지 전환 없이 이동합니다.

Link는 주로 내비게이션 바, 버튼, 링크 목록 등에서 사용되어 사용자가 특정 경로로 이동할 수 있도록 합니다.

NavLink와 Link는 모두 React Router의 일부로써, 라우터를 사용하여 애플리케이션의 네비게이션을 처리하는 데 도움을 주는 유용한 컴포넌트입니다.

이들을 사용하여 애플리케이션 내에서 내부 링크를 생성하고, 사용자가 링크를 클릭했을 때 애플리케이션이 해당 경로로 이동하거나 특정 동작을 수행할 수 있습니다.

---

프로젝트 때 활용한 부분을 소개해드리려고 한다.

전체 header.js 코드

import { NavLink, useLocation } from 'react-router-dom';
import '../css/header.css';


function Header(){
  const router = useLocation();

    return  (
    <header className="header">
      <nav className="menu">
        <ul>
          <li>
            <NavLink to="/" className={router.pathname === '/' ? 'active' : ''}>header test</NavLink>
          </li>
        </ul>
      </nav>
    </header>

    )
}
export default Header;

---

css file을 만든뒤 header.js에서 import하였다.

import '../css/header.css';

css file code

  .active{
    font-weight: bold;
  

---

NavLink를 이용하여 Click시 "/"로 이동하게끔 설정했다.
className 안의 코드는 현재 경로 정보를 제공하는 역할을 하는 useLocation를 이용하여 router.pathname이 '/'와 같을때는 active style을 적용하였고 아닐때는 style을 없앴다.

이렇게하여 Navlink로 이동한 페이지일때 해당 태그가 bold처리 되게끔하여 현재 활성화된 페이지를 시각적으로 표시할 수 있게 하였습니다.

const router = useLocation();

 <NavLink to="/" className={router.pathname === '/' ? 'active' : ''}>header test</NavLink>

---

실제 프로젝트에 적용한 header의 모습

서비스 소개 페이지로 들어가면 서비스 소개 글자가 bold 처리된모습을 확인 할 수 있다.