# 라우터(Router)

#1 SPA (Single Page Application)

싱글 페이지 애플리케이션은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다. 즉 페이지가 한 개인 애플리케이션을 말한다. html은 페이지 수와 같이 존재하므로 싱글 페이지 애플리켕션은 html파일이 하나가 된다.

#2 Routing

라우팅(Routing)이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것이다. 리액트 자체에는 이러한 기능이 내장되어있지 않다. 이것이 리액트가 Framework 가 아닌 Library 로 분류되는 이유이다. 그러므로 추가적인 라이브러리를 사용하여야 하는데 이 때 사용하는 것이 React-router이다. React-router는 리액트의 라우팅 기능을 위해 가장 많이 사용 되는 라이브러리이다.

#3 React Router

Create React App(CRA)에 특별히 routing을 위한 로직이 들어있지 않기 때문에, 가장 인기 있는 routing solution인 react-router 를 추가해서 routing을 구현한다.

#3-1 react-router 설치

npm install react-router-dom --save

#3-2 Router 컴포넌트 구현하기

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

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>
        <Route path="/" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/main" element={<Main />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

export default Router;

#3-3 index.js

ReactDOM.render(, document.getElementById('root'));

현재 화면에는 App 컴포넌트가 보여지고 있다. (또는 Login 컴포넌트, Main 컴포넌트)

CRA로 만든 앱에 routing 기능을 적용하려면 index.js 를 수정해야 한다.

App 컴포넌트 대신에 routing을 설정한 컴포넌트(Router)로 변경해야 한다.