[React]SPA 와 Routing

리액트에서 가장 대표적인 특징인 SPA와 Routing에 대해서 알아보도록 하자

SPA(Single Page Application)

• 웹사이트 전체에 html파일이 하나만 있는 경우를 말한다.
• html파일은 하나만 있지만, UI를 구성하는 코드는 js파일에 있다.
• index.html에 id가 root인 <div>애 DOM으로 연결되어져 보이는 형태이다.

💡브라우저가 화면에 웹페이지를 그리는 방법

• 주소창에 경로 입력 ➡️ 브라우저는 경로마다 존재하는html,css,js를 다운받아 그린다.
• 여기 다운받아 지는 html이 웹페이지가 된다.

MAP(Muti Page Application)

• 각각의 웹페이지마다 html파일이 존재하는 경우

---

Routing

리액트는 SPA로 html이 하나만 있는 단일 페이지 이기 때문에 웹사이트를 구성하는 웹페이지가 여러개라면 페이지마다 경로를 설정해줘야한다.

경로마다 해당 페이지를 브라우저 화면에 출력하는 것을 Routing이라고 한다.
그런데, 리액트는 UI를 그리는 라이브러리 이기 때문에 Routing기능이 내장되어 있지 않다.

따라서, 라우팅 기능이 가능한 라이브러리인 React-Router 라이브러리를 사용해야한다. 이는 경로에 따라 화면을 브라우저에 출력하는 routing기능을 제공한다.

리액트 라우터(react-router)

• 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다.
• 설치
  • npm install react-router-dom
• import
  • import { 라우터 컴포넌트 명 } from 'react-router-dom';

라우터 컴포넌트 종류

라우터에는 많은 컴포넌트가 존재하지만 그 중 제일 많이 사용되는 몇 가지만 소개한다.

• BrowserRouter
  • 전체를 감싸준다.
• Routes
  • 바뀌는 부분을 감싸준다. (url에 따라 변동되는 부분)
  • Routes외부는 모든 페이지에 공통으로 노출됨을 의미한다. (Header,Footer)
• Route
  • 사용자의 브라우저 주소 경로에 따라 우리가 원하는 컴포넌트를 보여준다.
  • <Route path="주소규칙" element={<보여줄 컴포넌트 명/>} />
  • Route 컴포넌트는 Routes 컴포넌트 내부에서 사용되어야 한다.

• index.js

import React from "react";
import ReactDOM from "react-dom/client";
import Router from "./Router";
import "./styles/reset.scss";
import "./styles/common.scss";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Router />);

---

• Router.js

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Header from "../../../components/Nav/Nav";
import LoginSujin from "./pages/sujinAhn/Login/Login";
import MainSujin from "./pages/sujinAhn/Main/Main";

const Router = () => {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/login-sujin" element={<LoginSujin />} />
        <Route path="/main-sujin" element={<MainSujin />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

위의 코드를 예시로 보면 <BrowserRouter>가 전체를 감싸고 있고 <Routes>가 각각의 <Route>들을 감싸고 있는 것을 알 수 있다.

• <Route>에는 보여줄 컴포넌트를 설정해주고,
  • element={<DayList />}
• 경로를 입력해주면, 해당 경로에 맞는 컴포넌트를 볼 수 있다.
  • path="/"
  • /는 처음에 보여지는 페이지를 나타낸다.
  • 아무 경로를 만들어 주지 않으면 Route가 컴포넌트 path속성 중에 /를 찾아 일치하는 element의 컴포넌트를 그려준다.

그리고 경로가 바뀌어도 고정적으로 보여주려면 <Routes> 컴포넌트 밖에 선언해주면 된다. 위의 코드에서는 <Header />가 해당된다.

마무리✨

리액트는 SPA 특성상 html 파일을 하나만 갖고 있기 때문에 여러 페이지를 보여주기 위해서는 router가 꼭 필요하다.
처음 작업할 때는 index.js에 보여질 컴포넌트를 번갈아 가면서 render 해줬는데 라우팅을 알게 된 후 Router컴포넌트를 만들어 주고 그것을 index.js에 render 시켜주면 Router.js에서 경로에 맞는 컴포넌트를 그려주기 때문에 index.js에서 화면에 보여질 컴포넌트를 직접 render 해 줄 필요가 없었다!