[ React ] React Router #2 <Link>

이전 글

1. 2022.02.09 - [React] - [ React ] React Router

---

react-router-dom :: <Link> component

react-rotuer-dom library의 <Link> component는 html의 <a> tag와 같이 연결된 주소로 페이지를 전환시켜준다.

 

<a> tag의 경우 페이지를 전환하는 과정에서 새로운 페이지를 불러오면서 애플리케이션이 가지고 있던 모든 상태를 날려버려 렌더링되어있던 모든 컴포넌트들도 모두 사라지고 페이지를 모두 처음부터 다시 렌더링하게 된다.

 

그렇기 때문에 react-rotuer-dom library를 사용하여 라우팅 하는 경우에는 <a>태그로 이루어져 있지만 페이지 전환을 방지하는 기능이 내장되어 있는 <Link> component 를 사용하여 페이지 전환을 해야한다. 

 

<Link> component를 사용하여 페이지를 전환하면 페이지를 새로 불러오지 않고 애플리케이션은 유지를 한 상태에서 HTML 5 History API를 사용하여 페이지의 주소만 변경해준다. 

 

<Link> Component 사용방법

<Link to="주소">내용</Link>

 

 App.js

// src/App.js

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


function App() {
  return (
    <div className="App">
        <h1> 라우팅 프로젝트 </h1>

        <ul>
            <li>
                <h2><Link to="/">Home</Link></h2>
            </li>

            <li>
                <h2><Link to="/about">About</Link></h2>
            </li>
        </ul>
        <Routes>
            <Route path="/" element={<Home />}>Home</Route>
            <Route path="/about" element={<About />}>About</Route>
        </Routes>
    </div>
  );
}

export default App;

 

실행화면