(react) SPA란?

SPA란?

기존 웹 사이트를 만들 때 여러 페이지를 만들고 링크를 이동하는 방식을 Multi Page Application라고 한다면, React에서는 웹 사이트 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것을  SPA(Single Page Application)라고 함.

SPA에서 페이지 전환(브라우징)은 HTML5의 History API를 사용하여 기능을 구현함. 즉, 자바스크립트에서 History API를 이용하여 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 됨.

 

 

History API

History.back()	세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드
History.forward()	세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드
History.go()	특정한 세션 기록으로 이동하게 해주는 비동기 메서드 ex) 1을 넣어 호출하면 앞으로, -1을 넣어서 호출하면 뒤로 이동
History.pushState()	데이터를 세션 기록 스택에 삽입
History.replaceState()	최근 세션 기록 스택의 내용을 새로운 데이터로 교체

 

https://developer.mozilla.org/ko/docs/Web/API/History_API

History API - Web API | MDN

 

 

 

SPA의 장점

• 빠른 속도: 전체 페이지를 새로고침하지 않아 초기 로딩 속도가 빠르고, 이후 페이지 전환 속도도 빠름.
• UX 만족도 상승: 마치 데스크톱 애플리케이션처럼 부드럽게 작동하여 UX 만족도 상승
• 동적인 웹 페이지 구현: JavaScript를 활용하여 다양한 동적인 효과를 구현 가능
• 모바일 환경에 적합: 모바일 환경에서도 빠르고 부드러운 사용자 경험을 제공

 

 

SPA의 단점

• 초기 로딩 시 자원 소모: 많은 JavaScript 파일을 한 번에 로딩해야 하므로 초기 로딩 시간 증가
• SEO: 검색 엔진은 JS로 렌더링된 페이지를 완벽하게 인식하지 못할 수 있음(서버 사이드 렌더링(SSR) 등을 통해 해결 가능)
• 복잡성: JS로 복잡한 로직을 구현해야 하므로 개발 난이도 상승

 

 

앞으로 사용자가 모바일을 더 많이 사용할 것으로 예상되는 만큼 React를 비롯해서 Vue.js, Svelte.js 등 SPA개발 방식에 대한 공부를 꾸준히 해가야 할 듯... ㅋ