SPA란?

이 포스트는 https://velopert.com/3417

react-router :: 1장. 리액트 라우터 사용해보기 | VELOPERT.LOG

를 필사한 글입니다.

 

SPA란?

Single Page Application 의 약자이다. 

즉, 페이지가 1개인 어플리케이션을 말한다.

 

전통적인 웹어플리케이션의 구조는 여러페이지로 이루어져있지만, 유저가 요청할 때 마다 페이지가 새로고침되어서

페이지를 로딩할때마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 한다.

HTML파일 또는 템플릿 엔진 등을 사용해서 어플리케이션의 뷰가 어떻게 보여질지도 서버에서 담당했다.

 

요즘엔 웹에서 제공되는 정보가 많아서 속도적인 측면에서 문제가 있었고, 그것을 해결하기 위해서 캐싱과 압축을 하여 서비스가 제공되었다.

이것은 사용자와 상호작용이 많은 웹어플리케이션에서는 충분하지 않을 수도 있다. 

렌더링하는 것은 서버쪽에서 담당한다는 것은, 그 만큼 렌더링을 위한 서버자원이 사용되는 것이고, 불필요한 트래픽도 낭비된다.

 

그래서 react같은 라이브러리 혹은 프레임 워크를 사용해서 view 렌더링을 유저의 브라우저가 담당하도록 하고, 

어플리케이션을 브라우저에 로드한 다음에 정말 필요한 데이터만 전달받아 보여주게 되었다.

 

싱글페이지라고 해서 한종류의 화면만 있는 것은 아니다. 예를 들어서 블로그를 만들면

홈, 포스트, 목록 ,글쓰기 등의 화면이 존재한다. 

또, 화면에 따라서 다른 주소도 만들어줘야한다.

주소가 있어야 유저들의 북마크도 할 수 있고 구글을 통해 접속할 수 있다.

이처럼 다른 주소에 따라 다른 view를 보여주는 것을 라우팅이라고 하는데,

react 자체에는 이러한 기능이 내장되어 있지 않아서 

직접 브라우저의 API를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 한다.

ex) react-router library

 

 

SPA 단점

앱의 규모가 커지면 javascript 파일 사이즈가 너무 커진다는 것이다.

유저가 실제로 방문하지 않을 수도 있는 페이지에 관련된 렌더링 스크립트도 불러오기 떄문이다.

code splitting으로 라우트 별로 파일을 나누어서 트래픽과 로딩속도를 개선할 수 있다.