[React] SPA(Single Page Application) 이란?

SPA를 설명하기 전 SPA를 왜 사용하는지?

전통적인 웹 사이트는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링 하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않으며, 변경이 필요없는 부분을 포함하여 전체 페이지를 갱신하므로 굉장히 비효율적이다.

웹 사이트의 규모가 커질수록 서버쪽에선 과부하가 걸릴 수 밖에 없다. 그 만큼 속도적인 측면에서 사용자는 불편함을 그대로 느끼게 된다.

틀릴확률이 높은 개인적인 지식(수정 가능성 높음❗)

Traditional Page Lifecycle

HTML → CSS → DOM → Web browser

SPA Lifecycle

HTML → CSS → Virtual Dom → DOM(필요 요소만 변경) → Web browser 

 

Traditional Page Lifecycle vs SPA Lifecycle

참고) https://www.excellentwebworld.com/what-is-a-single-page-application/

 

SPA(Single Page Application)의 등장

서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹 사이트를 말한다. 

이러한 접근은 연속되는 페이지들 간의 사용자 경험의 간섭을 막아주고 애플리케이션이 더 데스크톱 애플리케이션처럼 동작하도록 만들어준다,

SPA에서 HTML, 자바스크립트, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하게 되는 방식이다.

 

SPA(Single Page Application)의 장점

- 빠른 로딩 시간

- 좋은 캐싱 능력

- 향상된 사용자 경험

- 신속한 프론트엔드 개발

 

Reference

https://www.excellentwebworld.com/what-is-a-single-page-application/

What Is A Single-Page Application? Meaning, Pitfalls & Benefits

https://ko.wikipedia.org/wiki/%EC%8B%B1%EA%B8%80_%ED%8E%98%EC%9D%B4%EC%A7%80_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98

싱글 페이지 애플리케이션 - 위키백과, 우리 모두의 백과사전