[React] SPA, react-router-dom

Single Page Applicaton(SPA)

예전에 웹 페이지에서는 페이지를 보여줄 때 여러페이지로 구성이 되어있었다.(A html, B html..)
그리고 페이지를 로딩할때마다 서버에서 리소스를 전달받아와서 렌더링했다. 즉, 웹 어플리케이션 뷰를 서버에서 담당했었다. 하지만, 규모가 커지고 사용자와의 상호 작용이 많아짐에 따라, 데이터 정보 전송 과부화로 인한 속도 저하 등 문제점이 생기게 되었다.

이를 해결하기 위해 SPA는 하나의 페이지(index.html)에 담아 동적으로 화면을 바꿔가며 표현한다. 사용자에게 보여준 페이지는 한 페이지지만, 사용자가 원하는 해당 페이지와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여 줄 수 있다.다른 주소에 다른 화면을 보여주는것을 Routing(라우팅) 이라고 하며, SPA에서 페이지 전환은 react-router를 이용해 가능하다.

🌻 React Router 개념

• 리액트 라우터란?
  • 사용자가 입력한 주소를 감지하는 역할로 사용자가 요청한 각각의 URL에 따라 선택된 페이지를 렌더링 해주는 라이브러리
  • MPA 방식에서는 여러 페이지를 분리해두고 페이지 간의 이동으로 이 라우트 시스템을 구축을 하지만, 그러나 SPA 방식의 리액트에서 라우트 시스템을 구축하기위해 React Router를 사용
• 라우터 컴포넌트
  • BrowserRouter: HTML5를 지원하는 브라우저의 주소를 감지
  • HashRouter: 해시 주소를 감지
  • MemoryRouter: 메모리에 저장된 이전, 이후 주소로 이동시키는 라우터
  • NativeRouter: 리액트 네이티브를 지원하는 라우터
  • StaticRouter: 브라우저의 주소가 아닌 프로퍼티로 전달된 주소를 사용하는 라우터

🌻사용하기

1. 설치

npm install react-router-dom --save

2. 적용하기

App.js

import React from "react";
import { Route, Routes, BrowserRouter } from "react-router-dom";
import LoginPage from "./Components/views/LoginPage/LoginPage";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<LoginPage/>}/>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

• 최상단 <BrowserRouter>태그로 감싸기
• <Routes> : 여러 Route를 감싸서 그 중에서 해당되는 Route를 렌더링 해주는 역할
• <Route> : path 속성에는 경로를 element 속성에는 보여주고 싶은 컴포넌트를 넣어주면됨

3. Link를 이용한 이동

• 리액트 라우터를 사용하는 컴포넌트에서는 Link를 사용해야 함
• a 태그를 클릭하여 페이지를 이동할 때 브라우저에서는 페이지를 새로 불러오게 되기 때문
• Link 컴포넌트 역시 a 태그를 사용하긴 하지만, 페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있음

<Link to="경로">링크 이름 </Link>

SPA의 단점

• 초기 로딩 시간 지연: SPA는 초기 로딩 시, 전체 애플리케이션의 자바스크립트 파일을 한꺼번에 로드해야 하기 때문에 초기 로딩 시간이 길어질 수 있음.
  → Code splitting과 Lazy Loading을 통해 해결

• SEO(검색 엔진 최적화)문제: SPA는 클라이언트 사이드 렌더링(CSR)을 사용하기 때문에 검색 엔진이 크롤링할 수 있는 HTML 콘텐츠가 부족함.
  → SEO문제 해결을 위해 SSR(Server-Side Rendering) 프레임워크인 Next.js를 사용해 초기 HTML을 서버에서 렌더링할 수 있음