SPA

SPA

Single Page Application의 약어이다. 말 그대로 안 페이지로 이루어진 애플리케이션이라는 의미이다. 전통적인 웹 페이지는 다음과 같이 여러 페이지로 구성되어 있다.

기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여줬다. 이렇게 화면을 서버 측에서 준비했다. 이럴 경우, 서버에 트래픽이 너무 많이 나오거나, 사용자가 몰려 서버에 높은 부하가 걸릴 수 있다. 그래서 리액트는 뷰 렌더링을 브라우저가 담당하도록 하고, 우선 애플리케이션을 브라우저에서 불러와서 실행시킨 후에 사용자와 인터렉션이 발생하면 필요한 부분만 자바스크립트로 업데이트한다. 만약 새로운 데이터가 필요하다면 서버 API를 호출해서 가져온다.

 

라우팅

SPA는 서버에서 사용자에게 제공하는 페이지는 한 종류이지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다. 다른 주소에 다른 화면을 보여 주는 것을 라우팅이라고 한다. 다양한 라이브러리 중에서 리액트 라우터를 사용하겠다.

 

SPA 단점

앱의 규모가 커지면 자바스크립트 파일이 커진다. 페이지 로딩 시 사용자가 실제로 방문하지 않을 수도 있는 페이지의 스크립트도 불러오기 때문이다. 

 

예시

 

URL 파라미터와 쿼리

 

서브 라우트

 

history

링크를 눌러서 현재 페이지를 이탈하려고 할 때 다음과 같은 브라우저 메세지 창이 뜰 것이다.