[React] Router

React Router

SPA(Single Page Application)는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말한다.
화면 전체를 새로 렌더링할 필요가 없기 때문에 보다 나은 사용자 경험을 제공한다.

SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하는 것은 아니다. 보여주는 화면에 따라 주소도 달라지게 되는데, 다른 주소에 따라 다른 뷰를 보여주는 과정을 라우팅(Routing)이라고 한다.

React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용한다.

React Router 설치

npm install react-router-dom

위 명령어를 터미널에 입력하여 React Router 라이브러리를 설치할 수 있다.

React Router 라이브러리가 설치되었으면 제공하는 컴포넌트들을 사용하기 위한 세팅을 진행해야한다.
js 파일 최상단에 import 구문을 추가한다.

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

React Router 주요 컴포넌트

• 라우터 역할을 하는 BrowserRouter
• 경로를 매칭해주는 Routes 와 Route
• 그리고 경로를 변경하는 역할을 하는 Link

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결 */}
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

         <Routes>
          <Route path="/" element={<Home />} /> 
					{/* 경로는 path로 컴포넌트는 element로 연결 */}
          <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;