[React] React Router

SPA는 Single Page Application의 약자로 서버로부터 새로운 페이지를 불러오는것이 아닌 화면을 업데이트 하기 위한 데이터만 전달 받아 화면 내에 원하는 부분만 업데이트하는 작동 방식을 말한다.
React 자체에는 이러한 기능이 내장 되있지 않아 React Router라는 라이브러리를 사용한다.

개발환경 구축

React Router는 외부 라이브러라이기 때문에 따로 설치가 필요하다.

npm install react-router-dom@^6.3.0

• 터미널에 위와 같은 명령어를 입력해 React Router를 설치한다. 위는 6.3.0버전 이지만 가장 최신버전이 설치된다.

React Router의 컴포넌트를 사용할 파일의 최상단에 컴포넌트를 import 해준다.

import React from 'react'
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

1. BrowserRouter

페이지를 새로고침 하지 않아도 주소를 변경하고싶은 부분을 BrowserRouter태그로 감싸준다.

function App () {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
             MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
      </div>
    </BrowserRouter>
  )
}

export default App;

2. Routes, Route

Routes : 여러 Route컴포넌트를 감싸 그중 경로가 일치하는 라우터만 렌더링 시켜준다.
Route : path속성을 지정해 Link컴포넌트에 연결된 경로로 연결해 준다.

function App () {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
             MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
        
        <Routes>
          <Route path="/" element={<Home />} /> 
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
	</BrowserRouter>  
  )
}

export default App;

3. Link

경로를 연결해 새로운 페이지를 불러오는것이 아닌 애플리케이션을 그대로 유지하면서 보여주고싶은 페이지의 주소만만 변경 해준다.

function App () {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link> // 연결하고싶은 Route의 path속성과 동일하게 입력한다.
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>
        
        <Routes>
          <Route path="/" element={<Home />} /> 
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
	</BrowserRouter>
  )
}

function Home() {
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;