5. [React] React SPA

 

 

# SPA

 

SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라,
화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 

브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말합니다.

 

 

* SPA와 MPA의 특징

	SPA (Single Page Application)	MPA (Multi-Page Application)
페이지 로딩 방식	단일 페이지에 모든 콘텐츠 포함	각 페이지 별로 새로운 요청
네비게이션	클라이언트 측 라우팅을 사용	서버 측 라우팅 및 페이지 전환
로딩 시간	초기 로딩 시 자원을 한 번에 받음	각 페이지마다 로딩이 필요
초기 로딩 속도	초기에는 모든 자원을 로드해야 함	각 페이지는 필요할 때마다 로드
서버 요청	데이터를 비동기적으로 요청	각 페이지 요청마다 서버 요청
상태 관리	전역 상태 관리가 일반적	주로 각 페이지의 로컬 상태 관리
페이지 전환 경험	부드럽고 빠른 전환 경험	페이지마다 새로운 로딩 경험
캐싱 및 성능 최적화	특정 자원을 캐싱하여 성능 최적화	각 페이지마다 캐싱이 가능
SEO (검색 엔진 최적화)	초기에는 문제가 있었으나 개선됨	검색 엔진이 각 페이지를 인식함

 

 

---

 

# Wireframe

 

Wireframe은 디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 것을 말합니다. 

이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있습니다. 

 

그리고 목업(mockup)은 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것을 말합니다. 

 

 

---

 

# React Router

 

라우팅 :

사용자가 애플리케이션 내에서 다양한 화면 또는 페이지로 이동할 때,

각 페이지에 대응하는 컴포넌트를 렌더링하는 과정을 관리하는 것

 

하지만 React 자체에는 이 기능이 내장되어 있지 않습니다. 

우리가 직접 주소마다 다른 뷰를 보여줘야 하죠.