React 정의 및 SPA 프레임워크 종류

React란?

 

A JavaScript library for building user interfaces

웹 또는 앱 애플리케이션의 UI, 즉 보여지는 부분(프론트 엔드 영역이죠)을 구축한다

 

SPA(Single Page Application) 아키텍쳐

 

Single Page Application, 한 개의 페이지로 이루어진 애플리케이션 이라는 뜻

MPA(Multi Page Application)과는 상반된 개념

 

기존 MPA의 문제점

 

사용자의 인터렉션에 대한 잦은 리렌더링(re-rendering).

즉, 페이지가 갱신되는 상황이 잦음

 

SPA 특징과 장점

1. 딱 한개의 페이지(Single Page)로 구성된 웹 앱이다.
2. 서버에 1회 리소스를 요청한다.
3. 그 이후에는 필요할 때, 데이터만 받아와서 기존 페이지를 ‘수정’해주는 방식으로 화면을 수정함
4. 리렌더링으로 인한 깜빡이는 현상이 없기 때문에 자연스러운 UX(User Experience)를 구현할 수 있다.
5. 비슷한 기술들 → Angular, Vue

SPA 단점

 

SEO에 약하다.

 

-> 대부분의 검색엔진 크롤러, 봇들이 자바스크립트 파일을 실행시키지 못하기 때문.

HTML에서만 콘텐츠를 수집하게 되어 클라이언트 사이드로 렌더링 되는 페이지를 빈 페이지로 인식한다.

(이를 보완하기 위해 next js 등의 기술이 등장함)

 

SPA 프레임워크 종류

1. ReactJS
   페이스북이 만들고 유지보수
   막강한 커뮤니티와 자료 보유
2. VueJS
   배우기 쉽다.
   꾸준히 성장하고 있다.
3. AngularJS
   안정적인 프레임워크
   배우기 어렵다.

왜 React인가?

 

1. NPM trends
2. RN(React Native)와의 상생, 심지어 VR에서도 활용 가능
3. 막강한 커뮤니티