[React] SPA 프레임 워크

🔰  SPA가 무엇인지, 장/단점을 알 수 있다.

✅ SPA(Single Page Application)란?

SPA는 Single Page Application의 약자로 단일 페이지로 구성된 웹 어플리케이션을 말한다.
Angular, Vue, React가 SPA를 지원하는 라이브러리들이다.

즉, 리액트는 UI 자바스크립트 라이브러리/프레임워크로써 SPA(Single Page Application)의 UI(User Interface)를 생성하는데 집중한 프레임워크/라이브러리다.

 

✅ 장/단점

🟢 장점

• 필요한 모든 정적 리소스를 처음에 한번 다운로드
• 페이지 간 이동시 필요한 데이터만 JSON으로 전달받아 전체적인 트래픽 감소 및 rendering에서 좋은 효율을 가짐
  → DOM 관리와 상태값 업데이트 관리 최소화
• 새로고침을 유발하지않아 더욱 쾌적한 사용자 경험을 얻을 수 있다.
• 부분적인 rendering으로 새로고침 발생하지 않아 화면 깜박임 없이 빠른 화면 이동 가능
• 모듈화 또는 component별 개발 용이
• 기존의 SSR과 비교할 때 배포 간단며, 네이티브 앱과 비슷한 사용자 경험 제공

🔴 단점

• 느린 초기 구동 속도 - 웹 어플리케이션에 필요한 resource를 한 번에 다운로드
• 검색엔진 최적화(SEO)에 부적합

일반적으로 SPA는
 CSR(클라이언트 사이드 렌더링, Client Side Rendering) 방식
으로 동작하는데, 이 방식은 자바스크립트 기반 비동기 모델로 서버로부터 데이터를 받아 뷰를 동적으로 생성하기 때문에, 처음 접속하면 빈 HTML을 보여주고, 이후에 자바스크립트를 받는 구조이기 때문에 검색엔진에서 CSR로 작성된 웹페이지 분석에 어려움이 발생한다.

• 코드가 외부에 노출되는 보안적인 문제 - 클라이언트에서 데이터를 처리하는 경우

 

 

✅ React with SPA

SPA는 웹/앱에 필요한 모든 정적 리소스를 처음에 한번 다운로드한다.

페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.

 

리액트는 UI 자바스크립트 라이브러리/프레임워크로써 SPA(Single Page Application)의 UI(User Interface)를 생성하는데 집중한 프레임워크/라이브러리다.
리액트는 JSX이라는 문법과 단방향 데이터를 근간으로 사용된다. 그리고 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리다.