SPA

SPA(Single Page Application)는 하나의 HTML 페이지에서 JavaScript를 통해 동적으로 콘텐츠를 변경하는 웹 애플리케이션 아키텍처입니다. 전통적인 MPA(Multi Page Application)와 달리 페이지 전환 시 전체 페이지를 새로 로드하지 않고, 필요한 데이터만 서버에서 가져와 DOM을 업데이트합니다.

SPA의 핵심은 클라이언트 사이드 라우팅입니다. History API를 사용하여 URL을 변경하면서도 페이지 새로고침 없이 뷰를 전환합니다. 이를 통해 네이티브 앱과 유사한 부드러운 사용자 경험을 제공하며, 페이지 간 상태 유지가 용이합니다.

React, Vue, Angular, Svelte 등의 프레임워크가 SPA 개발에 널리 사용됩니다. 이들은 Virtual DOM이나 반응형 시스템을 통해 효율적인 UI 업데이트를 지원하며, 컴포넌트 기반 아키텍처로 코드 재사용성을 높입니다.

SPA의 단점으로는 초기 로딩 시간이 길고 SEO에 불리하다는 점이 있습니다. 이를 보완하기 위해 코드 스플리팅, 프리렌더링, SSR과의 하이브리드 방식(Next.js, Nuxt 등)이 발전했습니다.

// React Router를 사용한 SPA 라우팅
import { BrowserRouter, Routes, Route, Link, useNavigate } from 'react-router-dom';

// 라우터 설정
function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
        <Link to="/products">제품</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/products" element={<Products />} />
        <Route path="/products/:id" element={<ProductDetail />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

// 동적 네비게이션
function ProductCard({ product }) {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(`/products/${product.id}`, {
      state: { fromList: true }
    });
  };

  return (
    <div onClick={handleClick}>
      <h3>{product.name}</h3>
    </div>
  );
}

// 코드 스플리팅으로 번들 최적화
import { lazy, Suspense } from 'react';

const AdminDashboard = lazy(() => import('./AdminDashboard'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/admin/*" element={<AdminDashboard />} />
      </Routes>
    </Suspense>
  );
}