📲 SPA

• SPA (Single Page Application) : 페이지가 한 개인 애플리케이션
• 리액트 프로젝트에선 .html 파일의 개수는 1개 >>> SPA(Single Page Application)

-> 한 개의 웹페이지(html) 안에서 여러 개의 페이지를 보여주는 방법 >> >Routing

🎱 Routing이란?

• 라우팅(Routing) : 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것
• React 자체에는 이러한 기능이 내장되어 있지 않음. (리액트가 Framework 가 아닌 Library 로 분류되는 이유)
• React-router : React의 라우팅 기능을 위해 가장 많이 사용 되는 라이브러리이다. (Third-party Library에 속함)

-> Router 컴포넌트 구현 예시

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
// react-router-dom에서 routing할 기능 import

import Nav from "./components/Nav/Nav";
import Footer from "./components/Footer/Footer";
import Login from "./pages/Login/Login";
import Signup from "./pages/Signup/Signup";
import Main from "./pages/Main/Main";

function Router() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>     #원하는 링크를 Routing
        <Route path="/" element={<Login />} /> 
        <Route path="/signup" element={<Signup />} />
        <Route path="/main" element={<Main />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

export default Router;

ReactDOM.render(<Router />, document.getElementById('root'));

-> <App /> 컴포넌트 대신에 Routing을 설정한 컴포넌트(<Router />)로 변경해줘야 Routing을 통해 SPA 구현 가능