리액트 라우터 : Link

React에서 react-router-dom의 Link 컴포넌트는 페이지를 새로고침 없이 이동할 수 있도록 도와주는 내비게이션 전용 태그입니다. HTML의 <a> 태그처럼 보이지만, 실제 동작은 다릅니다.

---

1. Link란?

<Link>는 react-router-dom에서 제공하는 컴포넌트로,
<a href="...">를 대체하며 브라우저 전체를 새로고침하지 않고도 URL 경로를 변경하고 해당 경로에 맞는 컴포넌트를 렌더링해줍니다.

---

2. 기본 사용법

import { Link } from 'react-router-dom'

function Home() {
  return (
    <div>
      <h1>홈</h1>
      <Link to="/about">About 페이지로 이동</Link>
    </div>
  )
}

• to 속성은 이동하고자 하는 경로를 나타냄
• 내부적으로 history.push()를 이용하여 경로를 바꿈
• 브라우저 새로고침 없이 컴포넌트가 전환됨

---

3. 주요 특징

특징	설명
새로고침 없음	Link는 단순히 경로를 바꾸기만 하고, 전체 페이지를 다시 불러오지 않음
빠른 페이지 전환	SPA 방식으로 빠르게 컴포넌트 전환
CSS 클래스 지정 가능	일반 HTML 태그처럼 className, style 등 적용 가능

---

4. 예제: 라우터 포함 전체 코드

// App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

// pages/Home.tsx
import { Link } from 'react-router-dom'

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/about">About으로 이동</Link>
    </div>
  )
}

export default Home

// pages/About.tsx
function About() {
  return <h1>About 페이지입니다</h1>
}

export default About

---

5. 주의할 점

• Link는 반드시 <BrowserRouter>나 <HashRouter>로 감싸진 컴포넌트 안에서만 동작해야 함
• to 속성에는 문자열 경로 또는 객체 { pathname, search, state } 도 사용할 수 있음

---

요약

속성 설명

to	이동할 경로 (문자열 또는 객체)
className, style	HTML 태그처럼 사용 가능
기능	브라우저 리로드 없이 페이지 전환 수행

 

Link는 React Router에서 사용자 경험을 부드럽게 유지하면서 경로 전환을 구현할 수 있는 기본 도구입니다.