React 개관

React는 유저 인터페이스(UI)를 빌딩하기 위한 Javascript의 라이브러리이다.

UI를 Building한다는 것은 무엇인가?
=> 웹 또는 앱 애플리케이션의 UI, 즉 보여지는 부분(프론트엔드 영역)을 구축한다는 의미

React.js는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나이다.
컴포넌트 단위의 독립적인 블록을 이용한 개발방법을 이용한다.
비슷한 프레임워크인 AngularJS와 VueJS가 있다.

SPA와 컴포넌트가 포인트!

SPA(Single Page Application) 아키텍쳐

정의

Single Page Application, 한개의 페이지로 이루어진 애플리케이션이라는 말. MPA(Multi Page Application)과는 상반된 개념

기존 MPA의 문제점

1. '좋아요'를 눌렀는데 웹사이트가 전체가 재로딩 됨.
2. 요즘 시대에는 리렌더링 즉, 페이지가 갱신되는 상황이 엄청나게 많기 때문에 계속해서 깜빡거리게 된다. => UX가 저하되고, 서버에 리소스 호출도 불필요하게 잦아진다.

SPA의 특징과 장점

1. 딱 한개의 페이지로 구성된 웹 앱이다.
2. 서버에 1회 리소스를 요청한다.
3. 그 이후에는 필요할 때, 데이터만 받아와서 기존 페이지를 '수정'해주는 방식으로 화면을 수정.
4. 사용자 입장에선 깜빡임?이 없다. 자연스러운 UX(User Experience)를 구현.
5. 비슷한 기술들 -> Angular, Vue

SPA의 단점

SEO에는 약하다.
SEO(Search Engine Optimization)을 위해서는 HTML 페이지 전체가 필요한데, SPA 페이지의 HTML 파일들은 내용이 없기 때문에 검색엔진에서 시맨틱한 내용을 읽어들이지 못 해서 SEO가 약하게 된다.

이런 단점을 보완하기 위해 NextJS가 많이 쓰이게 되었다.

SPA 프레임워크의 종류

1. ReactJS
   a. 페이스북이 만들고 유지보수
   b. 선발주자인만큼 막강한 커뮤니티와 자료 보유

2. VueJS
   a. easy to learn, simple!
   b. 꾸준히 성장하는 중
   c. 후발주자라 어쩔 수 없는 market share

3. AngularJS
   a. 안정적인 프레임워크
   b. hard to learn, heavy. 점유율 낮음

그 중에서 왜 React인가?

1. NPM trends 즉, 시장의 흐름에 따라서
2. RN(React Native)와의 상생, 모바일 개발도 할 수 있게 된다.
3. 막강한 커뮤니티
4. 채용공고가 많음

컴포넌트란?

리액트가 채택한 개발방법
리액트 = 벽돌
모든 것이 컴포넌트다.