[React] React 가 무엇인가? 왜 React를 배워야 하는가?

📌 React 란 무엇인가?

: A Javascript library for building user interfaces

▶️ React를 통해 UI(User Interface)를 building 한다.
= 웹 또는 앱 애플리케이션의 UI, 즉 보여지는 부분(화면)을 구축한다는 의미
= 프론트엔드 영역

• 웹 개발 안에서도 여러 가지 역할이 나뉜다. 프론트 , 백엔드 등

✔️ React.js
: SPA 기반의 프론트엔드 개발 프레임워크 중 하나.
컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용

• 비슷한 프레임워크 : AngularJS, VueJS

1. SPA란 무엇인가?

Single Page Application
: 하나의 페이지로 이루어진 application이라는 말.

• MPA(Multi Page Application)와 상반된 개념

* UX(User eXperience : 사용자 경험)가 마치 application과 같아서, 웹 앱이라는 말을 사용한다.

• 기존의 MPA(Multi Page Application)의 문제점
  : 특정 부분(ex, 좋아요)을 클릭 할 때마다 새로고침이 계속(=re-rendering) 된다. = UX가 상당히 불편해진다.
  → SPA는 특정 부분만 작동하도록 도와준다.

SPA의 특징

: 딱 한개의 페이지로 구성된 웹 앱.

• 서버에 1회 리소스를 요청한다 : index.html 만 요청한다. 나머지는 다 js 파일에 저장됨.
• 이후 필요할 때, 데이터만 받아와서 "수정"해주는 방식으로 화면을 수정한다.
• 굉장히 자연스러운 UX 구현 가능/ 화면 reloading 없음

SPA의 단점은??

• SEO(Search Engine Optimization) : 엔진 최적화가 약하다.
• div 파일 안에 html 파일 전체가 들어 있는 게 아니라, 아래와 같이 데이터를 요청하는 식으로 적혀 있기 때문에, 검색엔진, 즉 로봇이 필요한 데이터를 바로 찾을 수가 없다.
• <div id ="app"></div>

SPA 프레임워크의 종류

ReactJS
:페이스북이 만들고 유지보수 했음 -> 선발주자인 만큼 막강한 커뮤니티와 자료를 보유하고 있다.

VueJS
: 꾸준히 성장, market share가 적다.

AngularJS
: 안정적인 프레임워크, 꽤 무겁고 배우기 어렵다.

🧐 왜 React인가?

• NPM trends
  : React 사용자 수가 압도적으로 많다.

• RN(React Native)와 상생할 수 있다. + VR에서도 활용 가능
• 막강한 커뮤니티가 존재한다.

2. 컴포넌트란?

: react가 채택한 개발 방법

📌 컴포넌트 = 벽돌이라고 생각

header/body/footer 안에도 엄청나게 많은 componet가 존재하고 있다.

• SPA 기반 : 컴포넌트 단위로 변경 사항을 반영하기 때문에 깜빡임 X = 랜더링이라고 함.
• MPA 기반 : 하나의 변경사항을 반영하기 위해 전체 페이지 reload(새로고침) 됨.