[DAY8] React SPA

목차

🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일

⭐요약

---

SPA와 MPA의 개념 및 차이점, 와이어프레임과 목업의 정의, 그리고 React Router를 이용한 SPA 라우팅 방법에 대해 정리한다.

 

SPA	페이지 갱신에 필요한 데이터만 받아 현재 페이지를 업데이트하는 방식임. 빠른 인터랙션과 낮은 서버 부하가 장점이나, 초기 로딩 속도와 SEO가 단점임.
MPA	페이지 이동마다 서버로부터 전체 HTML을 새로 받아오는 방식임.
Wireframe / Mockup	와이어프레임은 디자인 전 단계에서 선으로 윤곽을 잡는 작업이고, 목업은 기기 프레임을 씌워 직관적으로 표현한 디자인임.
React Router	React SPA에서 라우팅을 구현하는 라이브러리임. <BrowserRouter>, <Routes>, <Route>, <Link> 컴포넌트를 사용함.

 

⭐SPA(Single Page Application)

---

1. SPA란?

• SPA(Single Page Application): 서버로부터 완전한 새로운 페이지를 불러오지 않고, 페이지 갱신에 필요한 데이터만 받아 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 애플리케이션 또는 웹 사이트이다.
• 즉, 업데이트가 필요한 부분만 새로 불러오는 방식이다.

2. SPA 장단점

🚀 장점

항목	설명
빠른 인터랙션	전체 페이지가 아닌 필요한 부분의 데이터만 받아 화면을 업데이트하므로, 사용자와의 Interaction에 빠르게 반응함
서버 부하 감소	서버는 요청받은 데이터만 넘겨주면 되므로 서버 과부하 문제가 줄어듦
향상된 사용자 경험	전체 페이지를 렌더링할 필요가 없으므로 더 나은 유저 경험을 제공함

 

🚀 단점

항목	설명
초기 로딩 속도 저하	JavaScript 파일의 크기가 크기 때문에 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어짐
SEO 불리	검색 엔진은 HTML 파일의 자료를 분석하는 방식으로 동작하는데, SPA의 경우 HTML 파일에 별다른 자료가 없어 검색 엔진 최적화(SEO)가 좋지 않음

⭐MPA(Multiple Page Application)

---

• MPA(Multiple Page Application): 페이지를 이동할 때마다 서버로부터 전체 HTML을 새로 받아오는 방식이다.

🚀 SPA vs MPA 비교

구분	SPA	MPA
페이지 로딩 방식	필요한 데이터만 받아 현재 페이지를 업데이트함	이동마다 전체 HTML을 서버에서 새로 받아옴
초기 로딩 속도	느림 (JavaScript 파일 크기가 큼)	빠름
이후 인터랙션	빠름	상대적으로 느림
SEO	불리함	유리함
서버 부하	낮음	높음

⭐Wireframe / Mockup

---

• 와이어프레임(Wireframe): 디자인에 들어가기 전 단계로, 선(wire)을 이용해 화면의 윤곽선(frame)을 잡는 작업이다.
• 목업(Mockup): 데스크톱, 스마트폰 등 기기의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 시각적 결과물이다.

구분	설명	특징
Wireframe	선(wire)으로 화면의 윤곽선(frame)을 잡는 단계	디자인 이전 단계로 레이아웃·구조 설계에 집중함
Mockup	기기 프레임을 씌워 실제처럼 보이도록 디자인한 것	와이어프레임보다 구체적이고 직관적으로 표현함

⭐React Router

---

1. 라우팅이란?

• 라우팅(Routing): 다른 주소(경로)에 따라 다른 뷰(View)를 보여주는 과정이다.
• React Router: React SPA에서 라우팅을 구현하기 위한 라이브러리이다.

2. React Router 설치 및 사용법

🚀 설치

npm install react-router-dom

🚀 import: 아래와 같이 필요한 컴포넌트를 import하여 사용한다.

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

🚀 주요 컴포넌트

컴포넌트	역할
<BrowserRouter>	라우터 역할을 하며, 라우팅 기능을 사용할 컴포넌트 전체를 감싸는 최상위 컴포넌트임
<Routes>	여러 <Route>를 감싸는 컨테이너로, 현재 경로에 맞는 <Route>를 찾아 렌더링함
<Route>	경로(path)와 해당 경로에서 렌더링할 컴포넌트를 매핑함
<Link>	페이지를 새로 불러오지 않고 경로를 변경하는 역할을 함 (HTML의 <a> 태그 대체)

⭐후기

---

• SPA와 MPA를 비교하면서 각 방식이 상황에 따라 장단점이 뚜렷하다는 것을 알게 되었다.
• 와이어프레임과 목업의 차이를 명확히 정리할 수 있었다. 개발에 앞서 UI를 먼저 설계하는 과정이 실제로 개발 방향을 잡는 데 얼마나 중요한지 다시 한번 느꼈다.

⭐참고자료

---

1) React Router 공식 문서, "Getting Started", https://reactrouter.com/en/main/start/overview

2) MDN Web Docs, "Single-page application (SPA)", https://developer.mozilla.org/ko/docs/Glossary/SPA

 

이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.