[React] SPA(Single Page Application)란?

1. SPA?

Single Page Application(싱글 페이지 애플리케이션)의 약어이다.

말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다.

 

과거의 웹 사이트

전통적인 웹 사이트는 요즘보다 문서 하나의 용량이 적었다. 

그래서 새로운 페이지를 요청하면 서버가 완전히 새로운 페이지를 전송했다. 

 

하지만 요즘엔 웹 사이트가 고도화되어, 한 페이지의 용량이 커지고, 그럴때마다 새로운 페이지를 전달하기엔 

버거워졌다. 

 

 SPA!

용량이 커진 웹 사이트를 무리없이 전송하기 위해서 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 

바꿔가면서 표현하는 것이 SPA인것이다. 

 

우리가 무언가를 클릭하거나 스크롤하면 홈페이지는 상호작용을 위해서 최소한의 요소만 변경한다. 

페이지 이동이 발생한 경우에도 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다.

 

하지만 SPA도 단점은 있는데, 앱의 규모가 커지면서 자바스크립트 파일이 커지는 부분과 페이지 로딩 시 사용자가 방문하지 않을 페이지의 스크립트도 불러온다는 점이다.