🍊 React
A 'JavaScript library' for fuilding user interfaces
- React를 통해서 UI를 building 할 수 있다.
- UI building : 웹 또는 앱 애플리케이션의 UI, 즉 보여지는 부분을 구축한다.
- SPA 기반의 프론트엔드 개발 프레임워크 중 하나이다.
- 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용한다.
- 비슷한 프레임워크 : AngularJS, VueJS
🍊 SPA(Single Page Application)
정의
- 한 개의 체이지로 이루어진 애플리케이션
- MPA(Multi Page Application)과는 상반된 개념
기존 MPA의 문제점
- 버튼을 누를 때 마다 웹페이지 다시 로딩
- 페이지가 갱신되는 상황(리랜더링)이 있으면 페이지가 계속 깜빡거린다.
SPA의 특징과 장점
- 딱 한개의 페이지로 구성된 웹 앱
- 서버에 1회 리소스를 요청한다
- 그 이후에 필요할 때, 데이터만 받아와서 기존 페이지를 '수정' 해주는 방식으로 화면을 수정한다.
- 굉장히 자연스러운 UX(User Experience)를 구형할 수 있다
- 비슷한 기술 : Angular, Vue
SPA 단점
- SEO에 약하다 (Search Engune Optimization)
- html이 잘 제공되어야 구글에서 검색이 잘 되는데 SPA는 index.html 하나만 주어지고, html에는 내용이 많이 들어가지 않는다.
- 검색엔진이 잘 찾을 수 없다
🍊 React 사용하는 이유
SPA 프레임워크의 종류
1. ReactJS
- 페이스북이 만들고 유지보수
- 성발주자인 만큼 막강한 커뮤니티와 자료를 보유
2. VueJS
- easy to learn, simple
- 꾸준히 성장하는 중
- 후발주자라 어떨 수 없는 market share
AngularJS
- 안정적인 프레임워크
- hard to learn, heavy. 그래서 나온지 꽤 됐음에도 점유율이 낮음
그 중, 왜 React?
- NPM trand
- RN(React Native)와의 상생, 심지어는 VR에서까지 활용 가능
- 막강한 커뮤니티
🍊 컴포넌트란
리액트가 채택한 개발 방법
- [컴포넌트 = 벽돌]
