[React] SPA와 react-router-dom

싱글 페이지 애플리케이션(SPA: Single-page application)
  SPA는 하나의 HTML 페이지와 애플리케이션 실행에 필요한 모든 자산(자바스크립트, CSS 등)을 한 번에 로드하여 동작하는 웹 애플리케이션입니다. 이후 사용자의 상호작용에 따라 페이지를 다시 로드하지 않고, 현재 페이지를 동적으로 업데이트합니다.
   => 새로운 페이지 요청 없이 DOM을 동적으로 변경하여 콘텐츠를 업데이트.

        초기 로딩 속도가 느릴 수 있지만 이후 사용자 경험이 향상됨.
        라우팅을 통해 URL에 따라 적절한 화면을 제공.

클라이언트 사이드 렌더링(CSR: Client-Side Rendering)
  CSR은 클라이언트 측에서 데이터와 자바스크립트를 사용해 화면을 렌더링하는 방식입니다. 서버는 빈 HTML 뼈대를 보내고, 클라이언트가 자바스크립트를 통해 콘텐츠를 동적으로 생성합니다.

동작 과정
 1) 브라우저가 서버에서 HTML 파일과 자바스크립트를 다운로드.
 2) 자바스크립트가 실행되며 API 호출로 데이터를 받아와 화면을 구성.

장점
 1) 빠른 페이지 이동 속도.
 2) 높은 사용자 경험(UX).
 3) 서버 부하 감소.

단점
 1) 초기 로딩 속도가 느림.
 2) SEO(Search Engine Optimization)에 불리함.

React와 CSR
 React는 CSR 방식으로 동작하며 SPA를 구현할 수 있는 강력한 라이브러리를 제공합니다. React Router를 사용하면 SPA의 라우팅 기능을 쉽게 구현할 수 있습니다.

History API
 History API는 브라우저의 세션 히스토리에 접근하여 방문 기록을 조작하거나 탐색할 수 있는 메서드와 속성을 제공합니다.

주요 메서드
 1) history.back(): 방문 기록에서 뒤로 이동.
 2) history.forward(): 앞으로 이동.
 3) history.go(n): n만큼 이동(-1은 뒤로, +1은 앞으로).

특징
서버 요청 없이 페이지 변경 가능.
현재 페이지 상태에 접근 가능.

React Router
 React Router는 SPA에서 라우팅을 구현하기 위한 라이브러리입니다. 

BrowserRouter
 HTML5 History API를 활용하여 URL을 감지하고 리액트 앱과 연결합니다.

import { BrowserRouter } from "react-router-dom";

<BrowserRouter>
  {/* 라우팅 컴포넌트 */}
</BrowserRouter>

Routes와 Route
 Routes는 여러 Route를 감싸서 경로가 일치하는 단 하나의 컴포넌트를 렌더링합니다.

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

<Routes>
  <Route path="/" element={<Home />} />
</Routes>

 

Nested Routes
 부모 라우트 내부에 자식 라우트를 정의하여 계층적 구조를 구현합니다.

<Routes>
  <Route path="tech" element={<TechPage />}>
    <Route path="react" element={<ReactPage />} />
    <Route path=":docId" element={<ReactDocPage />} />
  </Route>
</Routes>

Outlet
 부모 라우트에서 자식 라우트를 렌더링하기 위해 사용됩니다.

import { Outlet } from "react-router-dom";

function ParentPage() {
  return (
    <>
      <h1>Parent Page</h1>
      <Outlet />
    </>
  );
}

URL Parameter
URL 파라미터를 사용하여 동적 경로를 처리할 수 있습니다.

import { useParams } from "react-router-dom";

function ReactDocPage() {
  const { docId } = useParams();
  return <div>Document ID: {docId}</div>;
}

SPA의 장단점

장점	단점
빠른 사용자 경험	초기 로딩 속도 느림
서버 부하 감소	SEO 최적화 어려움
페이지 이동 시 새로고침 없음	자바스크립트 파일 크기 증가

 

 

Navigate
 조건부 렌더링 시 특정 경로로 리다이렉션을 수행하는 React Router 컴포넌트입니다

import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    navigate('/dashboard', { state: { user: 'JohnDoe' } });
  };

  return <button onClick={handleLogin}>Login</button>;
}