우리가 웹 페이지를 이용하면서 알게 모르게 많은 상호작용을 하게 됩니다. 좋아요, 구독 버튼을 클릭하던가, 스크롤을 아래로 내려 추가적인 콘텐츠를 찾아보거나 하는 등의 행동이죠.
그런데, 그 행동하나 하나 마다, 페이지를 다시 로딩한다면 어떻게 될까요? 시간도 오래 걸리고, 데이터도 많이 사용되어 매우 비효율 적 일 겁니다. 그래서 SPA를 이용하면, 이런 동작을 분할 하여 더 효율적으로 작동할 수 있게 됩니다.
1. SPA와 전통적인 웹의 차이
항목 전통 웹 (MPA) SPA (React)
| 페이지 전환 방식 | 새로운 HTML 페이지를 서버에서 받아옴 | 한 번만 로딩하고 이후는 JS로 변경 |
| 속도 | 느림 (전체 새로고침) | 빠름 (부분만 바뀜) |
| 사용자 경험 | 매번 깜빡이거나 끊김 있음 | 앱처럼 부드러운 전환 |
| 서버 의존도 | 높음 (매 요청마다 서버 응답 필요) | 낮음 (초기 로딩 이후 대부분 클라이언트 처리) |
2. SPA의 동작 방식
(1) 브라우저가 리엑트 앱을 로딩 하여, HTML 파일 하나만 받음
(2) 리엑트가 내부적으로 가상 DOM을 사용해 랜더링
(3) 페이지 이동은 react-router-dom으로 처리
→ 실제로는 URL만 바뀌고, 서버 요청 없이 컴포넌트만 교체됨
3. SPA의 장단점
(1) 장점
- 💨 빠른 페이지 전환 → 서버에 요청 안 해도 URL만 바뀌면 컴포넌트 교체
- 📱 앱처럼 부드러운 UX → 모바일앱에 가까운 경험
- 💻 컴포넌트 재사용성 높음 → 유지보수가 쉬움
- 📦 백엔드와 분리된 구조 가능 → 프론트/백 협업에 유리
(2) 단점
- ❌ 초기 로딩이 무겁다 → JS 번들 파일이 커질 수 있음
- ❌ SEO에 불리하다 → 검색 엔진이 HTML 내용을 잘 못 읽음
- ❌ 브라우저 뒤로가기 관리 필요 → 직접 처리해야 함
4. SPA의 주요 문법
(1) 터미널에서 설치가 필수
(2) 다음과 같이 임포트
(3) 연결하고 싶은 파일을 임포트 하고, BrowserRouter안에 Routes에서 Pat를 정해 줍니다.
(4) 연결된 다른 파일에서는 링크를 이용해서 연결 해줍니다.
이렇게 연결하는 부분만 신경 써준다면, SPA를 이용하여 더 많은 기능을 넣은 웹 페이지에 넣을 수 있게 됩니다.