SPA (Single Page Application)

안녕하세요 YB 권새봄입니다 !

 

1주차, 2주차 과제를 진행하면서 화면 전환이나 페이지 이동이 부드럽지 않거나, 클릭할 때 전체 화면이 깜박이는 경험을 하게 되었습니다.  그 과정에서 리액트의 핵심 개념 중 하나인 SPA 에 대해 다시 한번 깊이 있게 살펴보고 싶다는 생각이 들어서 공유 과제 주제로 선정하게 되었습니다!

 

📌 SPA 개념 및 특징

https://docs.tosspayments.com/resources/glossary/spa

🎯 SPA 란?

SPA(Single Page Application)는 이름 그대로 하나의 HTML 페이지에서 모든 동작이 이루어지는 웹 애플리케이션입니다. 페이지가 이동되는 것처럼 보이지만 실제로는 전체 페이지를 다시 불러오는 것이 아니라, 필요한 부분만 JavaScript로 교체하며 동작합니다.

 

🎯 기존 MPA(Multi Page Application)와의 차이점

구분	MPA	SPA
페이지 이동	서버에서 HTML 전체 다시 로드	JavaScript로 필요한 부분만 변경
요청 방식	매 이동마다 서버에 HTML 요청	최초 1회만 HTML 요청 후 API 사용
속도	이동 시 새로고침 발생 → 느림	부드러운 전환 → 빠름
SEO	기본적으로 유리	별도 설정 필요 (SSR, prerender)
구현 난이도	상대적으로 쉬움	라우팅/상태관리 등 복잡함

 

🎯 SPA가 주는 사용자 경험(UX)의 장점

• 전체 페이지 리로드 없이 부드러운 화면 전환
• 앱처럼 빠르고 즉각적인 반응
• 불필요한 리소스 요청 최소화 → 속도 향상
• 캐시를 활용해 성능 최적화 가능

 

📌 동작 원리

🎯 클라이언트 사이드 라우팅이란?

전통적인 웹은 서버에서 URL에 따라 HTML을 반환하지만, SPA는 클라이언트가 라우팅을 제어합니다. URL이 변경되어도 페이지 전체를 새로 고치지 않고, JavaScript가 어떤 화면을 보여줄지 결정합니다.

 

🎯 해시 라우팅 vs 히스토리 라우팅

구분해시	라우팅 (/#/about)	히스토리 라우팅 (/about)
동작 방식	URL의 # 이후 값만 사용	HTML5의 History API 사용
서버 설정 필요 여부	필요 없음	서버가 모든 요청을 index.html로 리디렉트해야 함
장점	간단하고 빠르게 구현 가능	더 깔끔한 URL 구조
단점	URL이 덜 직관적	서버 설정 없으면 404 발생

 

🎯 초기 로딩과 이후 요청 처리 방식

• 초기 로딩 시 HTML, CSS, JavaScript 등 모든 리소스를 한 번에 받아옴
• 이후 페이지 이동 시에는 서버에 HTML 요청 없이, JavaScript가 API 요청 후 화면 렌더링
• 필요 시 캐싱, 상태 관리 등을 통해 성능 개선

 

📌 결론

SPA(Single Page Application)는 페이지 전환의 부드러움, 빠른 반응성, 그리고 앱과 유사한 UX를 제공하는 현대 웹 개발의 핵심 개념입니다. 특히 리액트와 같은 프레임워크는 이러한 SPA 구조를 손쉽게 구현할 수 있도록 도와주며, 사용자 중심의 인터랙티브한 웹 서비스를 만드는 데 매우 유리합니다.

 

앞으로 리액트를 활용한 프로젝트를 진행할 때, 단순히 작동하는 화면을 넘어서, 사용자가 끊김 없이 서비스를 이용할 수 있는 환경을 만들기 위해 어떤 구조를 선택하고 어떻게 구성할지에 대해 더 깊이 고민해봐야겠다고 생각했습니다!