SPA = Single Page Application

MPA = Multi Page application

전통적인 웹 애플리케이션 방식이다.

• 멀티페이지 애플리케이션 : 사용자가 다른 페이지로 이동할 때마다 새로운 HTML을 받아오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 화면에 보여준다. 새로운 페이지를 보여줄 때마다 서버 측에서 모든 준비를 하기 때문에 트래픽이 더 많이 발생한다

SPA = Single Page Application

MAP의 단점을 개선하는 웹 애플리케이션 방식

• 싱글페이지 애플리케이션 : 하나의 페이지로 이루어진 애플리케이션
  리액트 라이브러리를 사용해 뷰 렌더링은 사용자의 브라우저가 담당하게 한다. HTML을 처음 한번만 받아와서 웹애플리케이션을 실행한 후, 사용자의 요청에 따라 필요한 데이터만 서버에서 받아와 화면에 업데이트 하는 방식이 SPA이다. 기술적으로는 한 페이지만 존재하지만 사용자가 경험하기에는 여러 페이지가 존재하는 것처럼 느낄 수 있다.

왜 굳이 html을 하나만 줄까?

📕 비효율적이다

페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오는 것은 비효율적. → 많은 이유가 있지만, 그 중 제일 중요한 건 사용성 때문입니다.

 

📕 단점은 없는가?

SPA는 딱 한 번 정적자원을 내려받다보니, 처음에 모든 컴포넌트를 받아온다.

즉, 사용자가 들어가지 않는 페이지까지 전부 가지고 오기 때문에 컴포넌트가 아주 많다면 첫 로딩 속도가 느려진다

 

 

SPA는 주소를 어떻게 옮길 수 있을까?

html은 딱 하나를 가지고 있지만, SPA도 브라우저 주소창대로 다른 페이지를 보여줄 수 있다.

리액트 라우터는 사용자 브라우저 주소창의 경로에 따라 페이지를 보여준다.
이때 서버에 다른 페이지의 html을 요청하는 게 아니라 브라우저의 History API를 사용해 브라우저 주소값만 변경하고

라우팅 설정에 따라 다른 페이지를 보여주게 되는 것이다.