React-router-dom: <Link>와 <NavLink>에 대해서

Link

웹 페이지에서 이동 기능을 가진 <a>태그의 경우, 클릭하게 되면 브라우저가 새로고침되어 기존의 상태 값이 초기화된다. React Router에서는 <a>태그 대신 <Link>컴포넌트를 사용하여 <a>태그와 유사한 동작을 하면서도 페이지를 새로고침 하지 않고 URL경로만 변경할 수 있도록 한다.

• <Link to={'이동할 주소'}>링크</Link>

import Home from './components/Home'
import About from './components/About'
import { Route, Routes, Link } from 'react-router-dom'
import Intro from './components/Intro'
import './App.css'

function App() {
  return (
    <div>
      <p>페이지 이동 버튼</p>
      <Link to={'/'} className="link">Intro</Link>
      <Link to={'/home'} className="link">Home</Link>
      <Link to={'/about'} className="link">About</Link>
      <Routes>
        <Route path={'/'} element={<Intro />} />
        <Route path={'/home'} element={<Home />} />
        <Route path={'/about'} element={<About />} />
      </Routes>
    </div>
  )
}

export default App

 

아래와 같이 Link 컴포넌트 자체는 <a>태그로 이루어져 있어, <a>태그가 자동적으로 생성되는 모습을 볼 수 있다. 하지만 페이지 전환을 방지하는 기능이 내장되어 있어 브라우저가 새로고침되지 않는다.

 

NavLink

<NavLink>는 기존의 <Link>와 비슷하지만 활성화 된 상태일 때 특정 스타일을 적용할 수 있는 컴포넌트이다. <NavLink>는 style prop을 통해 isActive와 isPending 두가지 함수를 받는다. isActive의 경우 링크가 활성화 되었을 때 true를 반환하고, isPending의 경우 링크를 클릭하고 탐색이 완료되지 않았을 때 true를 반환한다.

• <NavLink to={'이동할 주소'} style={부여할 스타일}>링크</NavLink>

아래 예제의 경우 isActive가 true를 반환하면, 즉 링크가 활성화가 되면 해당 글자가 검은색으로 변경된다.

import Home from './components/Home'
import About from './components/About'
import { Route, Routes, NavLink } from 'react-router-dom'
import Intro from './components/Intro'
import './App.css'

function App() {
  const activeStyle = {
    color: "black",
  }

  return (
    <div>
      <p>페이지 이동 버튼</p>
      <NavLink to={'/'} style={({ isActive }) => isActive ? activeStyle : undefined} className="link">Intro</NavLink>
      <NavLink to={'/home'} style={({ isActive }) => isActive ? activeStyle : undefined} className="link">Home</NavLink>
      <NavLink to={'/about'} style={({ isActive }) => isActive ? activeStyle : undefined} className="link">About</NavLink>
      <Routes>
        <Route path={'/'} element={<Intro />} />
        <Route path={'/home'} element={<Home />} />
        <Route path={'/about'} element={<About />} />
      </Routes>
    </div>
  )
}

export default App