React? SPA? MPA?

📖 React

리액트는 대체 뭘까 ? 그 전에 UI가 무엇인지부터 알아볼 필요가 있다.

UI ( User interfaces의 약자 )
사용자에게 보여지는 영역을 만드는 프론트엔드 영역이다.

리엑트는 그런 영역을 만드는 자바스크립트 라이브러리이다.

우리는 이 리액트로 UI를 Building 할 수 있다.
이 말은 즉, 사용자에게 보여지는 영역를 구축할 수 있다는 말이다 !

⭐️ SPA (Single Page Application)

단 하나의 페이지로 이루어진 애플리케이션이다.
요즘 시대는 US가 부드럽고 마치 애플리케이션과 비슷하다 해서 웹앱이라는 말도 많이 씀

하나의 페이지 안에서 해당되는 요소만 살짝 바꿔주는 개념이다
EX) 인스타 좋아요 누르면 그 자리에서 좋아요만 달리는 경우

👍 SPA의 특징/ 장점

1. 서버에 1회 리소스 요청

React project를 설치하면 index.html 파일 하나만 있다.
나머지는 다 자바스크립트로 그려주는 구조

2. 그 이후에는 필요할 때 데이터만 받아와서 기존 페이지 수정해주는 방식 (동적으로 생성)

3. 사용자 입장에선 깜빡임 없음 자연스러운 UX (User Experience :유저 경험)을 구현할 수 있음
4. 비슷한 기술 : Angular , Vue (구현의 차이는 존재)

---

👎 SPA의 단점 : SEO에 약함

SEO는 뭘까?

Search Engine optimization : 설치 엔진 최적화라는 뜻이다.
예를들어 구글에 있는 검색을 도와주는 로봇이 찾으려는 웹사이트를 잘 찾을 수 있도록 HTML파일들을 잘 제공해줘야 한다.

그러나 SPA에서는 index.html 파일 밖에 없음..
나머지는 자바스크립트에서 동적으로 내용을 써주는 것 뿐이기 때문에..

그래서 구글 검색 엔진이 찾을 수 없는 단점을 보유하고 있다.

MPA는 검색 엔진이 찾을 수 있지만..
SPA는 검색엔진이 찾기 어려워서 약하다.

그는 최약체야

---

⭐️ MPA

Multi page Application
여러개의 페이지로 이루어진 애플리케이션이다 .
문제점 - 리렌더링 . 페이지가 갱신되는 상황이 많음
EX ) 인스타 좋아요 눌렀는데 웹사이트 다시 로딩되는 경우

---

SPA 프레임 워크 종류

1. ReactJS -> 페이스북이 만들고 유지보수함 , 막강한 커뮤니티와 자료 보유중!
2. VueJs
3. AngularJS

컴포넌트 -> 컴포넌트 === 벽돌 이라고 이해하면 쉬움
EX) 인스타 - 아이콘, 하단 이미지, 댓글창 , 좋아요 모두가 컴포넌트이다.

---

✍️ 다시 짚고 넘어가는 SPA / MPA 차이점

SPA 기반은 컴포넌트 단위로 변경사항을 변경하기 때문에 깜빡임 (랜더링) 이 없다.
MPA : 하나의 변경사항을 반영하기 위해 전체 페이지를 다시 로딩함 -> 랜더링 O!!

---