SPA (Single Page Application)
서버에서부터 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹애플리케이션이나 웹사이트를 말한다.
HTML, Javascript, CSS등 필요한 것들을 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가한다
SPA의 특징
라우팅(Rounting)
라우팅은 출발에서 목적지까지의 경로를 설정하는 기능이다. SPA에서는 브라우저에서 이것을 구현하는것이 핵심이다.
보통은 사용자가 요청한 URL 및 이벤트를 해석해 페이지전환을 하기 위해 페이지 리로딩, 화면 깜빡임, 과부하가 걸릴 수 있는데
SPA의 경우 부드러운 화면 전환, 서버에 필요데이터를 요청하지 않고 페이지 전환이 가능.
컴포넌트(Component)
컴포넌트들이 모여 한 페이지를 작성하고, 특정 부분만 데이터를 바인딩한다.
index.html파일에서 css, js등 리소스 파일들과 모듈들을 로드해서 페이지 이동이 없이 특정 영역만 새로 모듈을 호출하고 데이터 바인딩한다.
SPA의 장점
1. 단일 페이지로 구성되며, 서버사이드렌더링과 비교시 배포가 간단하고 네이티브 앱과 유사한 사용자 경험 제공
2. 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번만 다운로드한다.
3. 이후 새로운 페이지 요청시 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신하므로 트래픽 감소
4. 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만 렌더링하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공한다.
SPA의 단점
1. 웹 애플리케이션에 필요한 모든 정적 리소스를 최로 한번 다운로드 하기에 초기 구동 속도가 상대적으로 느리다.
2. SPA는 서버 렌더링 방식이 아닌 JavaScript기반 비동기모델이라 검색엔진 최적화 이슈가 있다.(Search Optimization, SEO)
[참고자료]
'Library > React' 카테고리의 다른 글
| [React] 모달창 component화 및 조건식 사용하기 (0) | 2022.06.02 |
|---|---|
| [React] React responsive (0) | 2022.06.01 |
| [React] onClick 사용과 state 변경 함수 이용하기 (0) | 2021.12.31 |
| [React] 터미널에 뜨는 eslint warning 없애기 (0) | 2021.12.31 |
| [React] state 만드는 방법 (0) | 2021.12.31 |