React Router-Link

React에서 Link 컴포넌트는 React Router 라이브러리에서 제공하는 중요한 기능으로, SPA(Single Page Application)에서 페이지 간 이동을 처리하는 데 사용됩니다. Link는 브라우저의 기본적인 페이지 리로드 없이 경로를 변경하고 새로운 UI를 렌더링합니다. 아래는 Link 사용법을 단계별로 설명합니다.

---

1. React Router 설치

React Router는 Link 컴포넌트를 제공하는 라이브러리입니다. 먼저 프로젝트에 설치해야 합니다.

npm install react-router-dom

---

2. 기본적인 프로젝트 구조 설정

BrowserRouter를 사용하여 라우팅을 활성화합니다.

import React from "react";
import ReactDOM from "react-dom/client";
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>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(<App />);

• <BrowserRouter>: 라우팅을 활성화하는 컨테이너 컴포넌트.
• <Routes>: 여러 경로를 그룹화합니다.
• <Route>: 경로와 렌더링할 컴포넌트를 매핑합니다.

---

3. Link 컴포넌트를 사용하여 경로 이동

Link는 브라우저의 기본 동작인 새 페이지 요청 없이 URL을 변경하고, 해당 경로에 맞는 컴포넌트를 렌더링합니다.

예제

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

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

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

---

4. Link 컴포넌트의 주요 속성

(1) to 속성

• Link가 이동할 경로를 지정합니다.
• 절대 경로, 상대 경로 모두 지원합니다.

<Link to="/about">About으로 이동</Link> // 절대 경로
<Link to="../">상위 경로로 이동</Link> // 상대 경로

(2) replace 속성

• 페이지 이동 시 히스토리에 기록하지 않고 현재 히스토리를 대체합니다.
• 뒤로 가기 버튼을 누를 때 이전 페이지로 돌아가지 않도록 합니다.

<Link to="/about" replace>About으로 이동</Link>

(3) 동적 경로

• URL 파라미터를 사용해 특정 데이터를 전달합니다.

<Link to="/profile/1">프로필 페이지로 이동</Link>

위 코드에서 /profile/1 경로로 이동하며, 1은 파라미터입니다.

---

5. 스타일 적용

Link 컴포넌트는 기본적으로 HTML <a> 태그로 렌더링되므로 CSS를 그대로 적용할 수 있습니다.

(1) CSS 클래스 적용

<Link to="/about" className="link-class">About</Link>

(2) 인라인 스타일 적용

<Link to="/about" style={{ color: "blue", textDecoration: "none" }}>About</Link>

(3) NavLink 사용

NavLink는 현재 경로에 따라 스타일을 동적으로 적용할 수 있습니다.

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

function Navbar() {
  return (
    <nav>
      <NavLink
        to="/"
        style={({ isActive }) => ({
          color: isActive ? "red" : "blue",
        })}
      >
        홈
      </NavLink>
      <NavLink
        to="/about"
        className={({ isActive }) => (isActive ? "active" : "")}
      >
        About
      </NavLink>
    </nav>
  );
}

---

6. 주의사항

• Link를 사용하면 페이지 전체가 새로고침되지 않습니다. 이는 SPA의 장점입니다.
• Link 컴포넌트를 사용할 때 반드시 BrowserRouter나 HashRouter 내부에 있어야 합니다. 그렇지 않으면 오류가 발생합니다.

---

7. 전체 코드 예제

App.tsx

import React from "react";
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>홈 페이지</h1>
      <Link to="/about">About 페이지로 이동</Link>
    </div>
  );
}

export default Home;

pages/About.tsx

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

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

export default About;