[React] SPA

 

SPA

Single Page Application의 약자이다.
말 그대로 하나의 페이지 안에 웹에 필요한 모든 정적 리소스가 들어있는 것.

 

예전에는 어떤 웹 어플리케이션을 만들때,

여러 페이지로 구성되었다.

A.html , B.html, C.html , D.html ....

또 페이지를 로딩할때마다 서버에서 리소스를 전달받아와서 렌더링했다.

즉, 웹 어플리케이션 뷰를 서버에서 담당했었다.

하지만, 규모가 커지고 사용자와의 상호 작용이 많아짐에 따라, 

데이터 정보 전송 과부화로 인한 속도 저하 등 문제점이 생기게 되었다.

그래서 요즘 나오는 라이브러리 또는 프레임워크는

뷰 렌더링을 서버가 아닌 웹 브라우저가 담당한다.

 

예전에는 페이지를 요청할때마다 서버로 접속하여 받아왔기 때문에,

페이지가 매번 새로고침 되었지만,

SPA의 경우 서버에서 제공하는 페이지가 한 개이며, 

로딩을 한 번 하고난 후에는 브라우저 내에서 나머지 페이지들을 정의하여 보여준다.

일단, 첫 번째 페이지를 받아온 후 다른 페이지로 이동할때는

서버에 새로운 페이지를 요청하는게 아니라,

새 페이지에서 필요한 데이터만 받아와서 다른 종류의 뷰를 만든다.

주소에 따라 다른 뷰를 보여주는 것을 라우팅(Routing)이라 부른다.