[React] SPA란?

jiny·2025년 1월 30일

기술 면접 준비 리액트(React)

기술 면접

목록 보기

50/77

🗣️ SPA에 대해 설명해주세요.

의도: 최근 프론트엔드 패러다임인 Single Page Application에 대해 알고 있는지 확인하는 질문
팁: 장단점을 명확하게 제시하면 좋습니다.
나의 답안

SPA는 Single Page Application, 즉 '하나의 페이지로 구성된 웹 애플리케이션'을 의미합니다.
전통적인 웹사이트는 사용자가 페이지를 이동할 때마다 서버에서 새로운 HTML 문서를 받아서 전체를 다시 렌더링했지만,
SPA는 최초 한 번만 전체 페이지를 불러오고, 이후에는 필요한 데이터만 비동기적으로 가져와서 화면 일부만 갱신합니다.

이런 방식 덕분에 페이지 전환 속도가 훨씬 빠르고, 앱처럼 자연스러운 사용자 경험(UX)을 제공할 수 있습니다.
또한 클라이언트 측 라우팅을 통해 URL이 바뀌어도 실제로는 같은 페이지 내에서 컴포넌트만 교체됩니다.

다만 초기 로딩 속도가 다소 느리거나, 검색 엔진 최적화에 불리할 수 있다는 단점이 있습니다.
이런 문제는 코드 스플리팅이나 서버사이드 렌더링(SSR)으로 보완할 수 있습니다.
주어진 답안 (모범 답안)

SPA는 Single Page Application의 약자로서 리액트나 뷰의 기반이 되는 기술입니다.
SPA는 여러 장단점이 있습니다.

우선 장점부터 말씀드리겠습니다.
기존에 MPA를 사용하면 페이지를 이동할 때마다 새로고침이 계속 일어났는데, SPA를 사용하면 이런 일이 없습니다.
라우터로 페이지를 이동하기는 하지만 사실 내부적으로는 MPA의 개념처럼 페이지를 이동하는 게 아니기 때문입니다.
그저 URL을 바꿔주고, 그 URL에 따라 화면의 컴포넌트를 바꿔치기 해주는 것으로 새로고침 없이 새로운 화면을 볼 수 있게 해주는 것이 큰 장점입니다.
이외에 클라이언트 사이드 렌더링을 사용하여 서버의 부담을 줄이고 빠른 화면 전환 등 로딩 속도를 개선할 수 있습니다.

다만 대표적인 단점으로는 SEO에 취약하다는 점과 초기 로딩이 느리다는 점이 있습니다.
그래서 요즘은 SPA 기반 앱에서 SSR과 CSR을 모두 혼합하여 장점만 가져와 사용할 수 있는 Next.js 프레임워크가 인기 있는 편입니다.

📝 개념 정리

🌟 SPA란?

SPA(Single Page Application)는 하나의 HTML 페이지를 기반으로 동작하는 웹 애플리케이션 구조이다.
처음에 기본적인 HTML, CSS, JavaScript를 포함한 단일 페이지가 로드된 후, 이후의 화면 전환은 새로운 페이지를 불러오는 것이 아니라 JavaScript를 사용하여 동적으로 콘텐츠를 업데이트하는 방식이다.

🌟 전통적인 MPA와의 차이

전통적인 웹 애플리케이션(MPA, Multi Page Application)에서는 사용자가 다른 페이지로 이동할 때마다 새로운 HTML 문서를 서버에서 받아와 브라우저가 다시 렌더링하는 방식이다.
반면, SPA는 첫 로드 이후에는 추가적인 HTML 문서를 요청하지 않고, JavaScript를 활용하여 동적으로 페이지 내용을 변경한다.

비교 항목	MPA(Multi Page Application)	SPA(Single Page Application)
페이지 이동 방식	서버에서 새로운 HTML을 받아옴	기존 HTML을 유지하며 JS로 변경
초기 로딩 속도	빠름 (필요한 HTML만 로드)	상대적으로 느림 (전체 애플리케이션을 한 번에 로드)
성능 최적화	서버에서 처리, 클라이언트 부담 적음	클라이언트에서 대부분 처리
SEO 최적화	검색 엔진 크롤링 용이	기본적으로 불리하지만 SSR(서버 사이드 렌더링)으로 해결 가능
사용자 경험	페이지 전환 시 깜빡임 발생	부드러운 화면 전환

🌟 React에서 SPA 구현 원리

React는 SPA를 개발하는 데 최적화된 라이브러리이며, 다음과 같은 방식으로 동작한다.

최초 페이지 로드
사용자가 웹사이트에 처음 접근하면 index.html과 함께 JavaScript 번들이 로드된다.
index.html의 기본 구조는 아래와 같다.
```
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>My React SPA</title>
</head>
<body>
  <div id="root"></div> 
  <script src="/static/js/main.js"></script>
</body>
</html>
```
React는 #root 내부에 전체 애플리케이션을 렌더링하며, 이후의 모든 화면 변경은 JavaScript를 통해 동적으로 이루어진다.

클라이언트 사이드 라우팅
React에서는 react-router-dom을 사용하여 라우팅을 처리한다.
이 방식은 서버에서 새로운 HTML을 요청하는 것이 아니라, window.history.pushState()를 이용하여 URL을 변경하고 해당 URL에 맞는 컴포넌트를 렌더링하는 방식이다.

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

function Home() {
  return <h1>홈 페이지</h1>;
}

function About() {
  return <h1>소개 페이지</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

이제 사용자가 /about으로 이동하면 전체 페이지를 새로고침하지 않고 About 컴포넌트만 변경된다.

상태 관리와 데이터 관리
React의 SPA는 클라이언트에서 상태를 유지하며, 상태 관리를 위해 여러 방법을 사용할 수 있다.
1) useState, useContext를 사용한 기본적인 상태 관리
2) Redux, Zustand 등의 라이브러리를 활용한 전역 상태 관리
3) React Query, SWR(Stale-While-Revalidate)을 사용한 비동기 데이터 관리
- 예제
```
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default Counter;
```
  이처럼 React는 상태를 관리하면서 컴포넌트 기반으로 UI를 동적으로 갱신한다.

🌟 SPA의 장점과 단점

장점
1. 빠른 사용자 경험
  한 번 로드된 후에는 페이지 전환 시 서버와의 통신 없이 변경되므로, 부드럽고 빠른 UX를 제공할 수 있다.
2. 적은 서버 부담
  MPA에서는 페이지 이동 시마다 서버 요청이 발생하지만, SPA는 API 요청만 하므로 서버 부담이 적다.
3. 컴포넌트 기반 개발
  React의 특징을 활용하여 재사용 가능한 컴포넌트로 UI를 구성할 수 있어 유지보수가 용이하다.
4. 모바일 친화적
  모바일 환경에서 네트워크 요청을 최소화할 수 있어 최적화된 성능을 제공한다.

단점
1. 초기 로딩 속도가 느림
  - SPA는 처음에 모든 JavaScript 번들을 다운로드해야 하므로, 첫 로딩이 MPA보다 느릴 수 있다.
  - 이를 해결하기 위해 코드 스플리팅과 같은 기법을 사용할 수 있다.
```
import { lazy, Suspense } from "react";

const About = lazy(() => import("./About"));

function App() {
  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      <About />
    </Suspense>
  );
}
```
2. SEO(검색 엔진 최적화) 문제
  - 기본적으로 SPA는 클라이언트에서 렌더링되므로, 크롤러가 HTML을 분석하기 어렵다.
  - 이를 해결하기 위해 SSR(서버 사이드 렌더링) 또는 SSG(정적 사이트 생성) 기법을 사용할 수 있다.
3. 브라우저 히스토리 관리 어려움
  - 새로고침하면 상태가 사라지거나 백버튼 기능이 제대로 작동하지 않을 수 있다.
  - react-router-dom의 BrowserRouter 또는 HashRouter를 활용하여 해결 가능하다.
4. 보안 문제
  - 모든 JavaScript가 클라이언트에 노출되므로, 중요 데이터 처리는 서버에서 해야 한다.
  - 또한 CORS 정책과 CSRF, XSS 같은 보안 취약점을 주의해야 한다.

🌟 SPA 최적화 방법

코드 스플리팅: React.lazy()를 사용하여 필요한 모듈만 동적으로 로드
SSR/SSG 적용: Next.js 같은 프레임워크 사용
이미지/리소스 최적화: Lazy Loading 및 WebP 형식 활용
CDN 사용: 정적 파일을 빠르게 제공

jiny

이전 포스트

[TS] type과 interface의 차이점

다음 포스트