[React] SPA 와 Router

1. SPA(Single Page Applicaion)란?

SPA는 Single Page Application의 약자이다. 즉 페이지가 한 개인 어플리케이션 이라는 의미를 지닌다. 보통 전통적인 웹어플리케이션에서는 페이지를 구성할 때 페이지 수 만큼html 파일이 존재한다. 페이지를 로딩할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 한다. HTML파일, 템플릿 엔진 등을 사용해서 어플리케이션의 뷰가 어떻게 보여질지도 서버에서 담당했다.

요즘은 웹에서 제공되는 정보가 많기 때문에 속도적인 측면에서도 문제가 있고, 규모가 커짐으로 사용자와의 상호 작용이 많아짐에 따라 문제점이 생기게 되었다. 그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용해서 뷰 렌더링을 서버가 아닌 웹 브라우저가 담당한다. SPA에서는 서버에서 제공하는 페이지가 한 개이며, 로딩을 하고 난 후에는 브라우저 내에서 나머지 페이지들을 정의하여 보여준다. 첫 번째 페이지를 받아온 후 다른 페이지로 이동동할때는 서버에 새로운 페이지를 요청하는 것이 아니라 새 페이지에서 필요한 데이터만 받아와서 다른 종류의 뷰를 만든다.

한 개의 웹페이지(html)에서 여러 개의 페이지를 보여주는 방법을 라우팅Routing이라 부른다. 다른 주소에 따라 다른 뷰를 보여준다.

1-2. SPA의 단점

앱의 규모가 커지면 자바스크립트 파일 사이즈가 너무 커진다는 것이다. 페이지를 로딩할 때 실제로 방문하지 않을 수도 있는 페이지와 관련된 컴포넌트도 불러오기 때문이다.

2. 라우팅 - Routing

라우팅이란 다른 경로(url주소)에 따라 다른 화면을 보여주는 것이다. 리액트 자체에는 이러한 기능이 내장되어있지 않다. react-router는, 써드파티 라이브러리(Third-party Library)로서 리액트의 라우팅 기능을 위해 가장 많이 사용되고 있는 라이브러리이다. 만약 여러 화면으로 구성된 웹 어플리케이션을 만들게 된다면, react-routera는 필수 라이브러리이다.

3. Routing 사용하기

3-1. react-router 설치

npm start react-router-dom --save

• react-router-dom: 브라우저에서 사용되는 리액트 라우터 이다.

3-2. Router 컴포넌트 구현

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

import Nav from "./components/Nav/Nav";
import Login from "./components/Login/Login";
import Signup from "./components/Signup/Signup";

function Router() {
  return (
  <BrowserRouter>
    <Nav />
    <Routes>
    <Route path="/login" element={<Login />} />
    <Route path="/signup" element={<Signup />} />
   </Routes>
  </BrowserRouter>
 );
}

export default Router;

3-3. index.js

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

• 현재 화면에서는 <App /> 컴포넌트가 보여지고 있었다. CRA로 만든 앱에 routing 기능을 적용하려면 index.js를 수정해야 한다. <App /> 컴포넌트 대신에 routing을 설정한 컴포넌트 <Router /> 로 변경해야 한다.

(다음 포스팅에서는 Route 이동- Link 컴포넌트와 useNavigate에 대해서 다뤄볼 예정이다)

참조 문서: VELOTERT.LOG