[React.js] 페이지 라우팅

 

MPA (Multi Page Application)

애초에 서버가 여러개의 페이지를 가지고있어서 요청하면 해당하는 html을 반환하여 렌더링함 

많은 서비스가 사용하는 전통적인 방식 

쾌적한 페이지 이동을 제공하기 어려움 

 

페이지를 이동할때마다 원래 렌더링했던 페이지를 지우고 새로운 페이지를 다시 화면에 그려줌

-> 이렇게 되면 이동할때마다 화면이 깜빡 거리는걸 볼 수 있음 (예전에 만든 대법원 사이트 참고)

 

서버는 동시에 아주 많은 사용자가 페이지에 접속하게되면 서버 부하가 심해짐 

접속대기열 혹은 사이트가 터져버리는 현상이 생길 수 있음

 

 

SPA(Single Page Application)

단일 페이지 어플리케이션 

페이지 이동이 매끄럽고 효율적임

다수의 사용자가 접속해도 크게 상관 없음 

 

 

번들링 과정은 Vite가 담당하게 됨 

 

 

 

라우팅 설정

React Router 라이브러리 사용

React Router 공식 문서

https://reactrouter.com/en/main

Home v6.23.1 | React Router

 

main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

 

 

app.jsx

import "./App.css";
import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Diary from "./pages/Diary";
import New from "./pages/New";
import Notfound from "./pages/Notfound";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/new" element={<New />} />
      <Route path="/diary" element={<Diary />} />
      <Route path="*" element={<Notfound />} />
    </Routes>
  );
}

export default App;