[React] SPA(Single Page Application)에 대해 알아보자

 

 

들어가며,

오늘은 SPA에 대해 알아보려 한다!

공부를 시작한지는 얼마 안 되었지만 공부를 하다보니 SPA 라는 개념이 한 번씩 들렸기 때문에 궁금해서 조사해보았다. 

그럼 시작!!

---

 

📌SPA 란?

 

SPA(Single Page Application)는 단일 페이지 응용 프로그램을 의미한다. 이는 기존 웹 애플리케이션과 달리 페이지 갱신 없이 동적으로 콘텐츠를 로드하고 UI를 업데이트할 수 있는 방식으로 동작한다.

기존의 다중 페이지 웹 애플리케이션은 각 페이지가 서버로부터 완전히 새로운 HTML을 받아와야 했었다. 반면 SPA는 초기에 필요한 HTML, CSS, JavaScript를 한 번만 로드하고, 이후에는 필요한 데이터만 서버로부터 받아와서 동적으로 페이지를 업데이트한다.

SPA의 특징

1. 단일 페이지 로드: 사용자가 웹 애플리케이션에 접속할 때, 초기에 필요한 HTML, CSS, JavaScript 등의 리소스를 한 번 로드함
2. 동적 로딩: 사용자와 상호작용하면서 필요한 데이터는 AJAX 요청을 통해 서버에서 가져와서 동적으로 페이지를 업데이트함
3. 페이지 갱신 없음: 전체 페이지를 새로고침하지 않고도 콘텐츠를 갱신하거나 새로운 페이지로 이동할 수 있음음
4. 빠른 반응성: 사용자 경험을 향상시키기 위해, SPA는 빠른 데이터 로딩과 즉각적인 UI 업데이트이 가능
5. 라우팅: SPA는 클라이언트 측에서 라우팅을 처리하여 URL에 따라 적절한 컴포넌트나 뷰를 렌더링함. 이는 사용자가 브라우저의 뒤로가기나 앞으로가기 버튼을 사용할 때도 적절한 화면을 보여줄 수 있도록 함.

 

📌SPA의 장점

SP성능 향상: SPA는 초기에 필요한 리소스를 한 번에 로드하고, 이후에는 서버로부터 필요한 데이터만 비동기적으로 가져오므로 전체적인 성능이 향상될 수 있다. 사용자가 새로운 페이지로 이동할 때마다 새로운 HTML 파일을 서버로부터 다운로드 받지 않아도 되기 때문.

개발 생산성: SPA는 프론트엔드와 백엔드를 분리할 수 있다. 이는 개발팀이 서로 독립적으로 작업을 수행할 수 있게 하여 개발 생산성을 높이는 데 도움을 준다. 또한, API 기반의 백엔드와 잘 통합될 수 있어 개발자들이 다양한 기술 스택을 사용할 수 있는 유연성을 줄 수 있다.

오프라인 가능: 적절한 구현을 통해 SPA는 오프라인에서도 작동할 수 있다. 캐시된 데이터를 사용하여 사용자가 네트워크에 접근할 수 없는 상황에서도 애플리케이션을 계속해서 사용할 수 있게 해준다.