React
A JavaScript library for building user interfaces
React 라는 것을 통해 우리는 UI를 Building 할 수 있다.
UI를 Building 한다는 것?
: 웹 또는 앱 애플리케이션의 UI, 즉 보여지는 부분(Front end 영역)을 구축한다는 의미!
ReactJS는 SPA(single page application) 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용한다.
- 비슷한 프레임워크:
AngularJS,VueJS
SPA(Single Page Application) 아키텍쳐
한 개의 페이지로 이루어진 애플리케이션
MPA(Multi Page Application)과는 상반된 개념이다.
기존 MPA의 문제점 (super easy version)
좋아요 눌렀을 때 웹사이트 다시 로딩, 과연 편할까?
-> 요즘 시대에는 리렌더링(re-rendering) 즉, 페이지가 갱신되는 상황이 엄청나게 많기 때문에 계속해서 깜빡거릴 것!
SPA의 특징과 장점
- 딱 한개의 페이지(Single Page)로 구성된 웹 앱이다.
- 서버에 1회 리소스를 요청한다.
- 그 이후에는 필요할 때, 데이터만 받아와서 기존 페이지를 '수정'해주는 방식으로 화면을 수정한다.
- 사용자 입장에선 깜빡임 없는 자연스러운 UX(User Experience)를 구현할 수 있다.
- 비슷한 기술들 -> Angular, Vue(구현의 차이는 각각 존재)
SPA 단점
SEO(Search Engine Organization)에 약하다..
SEO을 위해서는 HTML 페이지 전체가 필요한데, SPA 페이지의 HTML 파일들은 모두
<html>
<head>
<title>리액트 프로젝트</title>
<link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>이렇게 생겼다
검색엔진.. 즉, 로봇이 찾을 수가 없다!
왜 React?
SPA 프레임워크의 종류
-
ReactJS
a. 페이스북이 만들었고 유지보수한다.
b. 선발주자인만큼 막강한 커뮤니티와 자료를 보유하고 있다. -
VueJS
a. easy to learn, simple!
b. 꾸준히 성장세
c. 후발주자라 어쩔 수 없는 market share! -
AngularJS
a. 안정적인 프레임워크!
b. hard to learn, heavy. 그래서 나온지 꽤 됐는데됴 점유율이 낮다.
이 중 왜 React일까?
- NPM trends
- React Native와의 상생, 심지어는 VR에서까지 활용할 수 있다.
- 막강한 커뮤니티
- 채용공고 많음 ㅎ_ㅎ
컴포넌트란?
리액트가 채택한 개발방법
컴포넌트 = 벽돌 로 이해하면 쉬울 것 같다! 벽돌을 쌓아 집을 짓는다.
header 컴포넌트, body 컴포넌트, footer 컴포넌트 만들어서 벽돌을 쌓아 올리듯이 개발하는겨~
어떤 웹 사이트에 변경이 일어났다고 했을 때,
- SPA 기반: 컴포넌트 단위로 변경사항을 반영하기 때문에 깜빡임 X (rendering)
- MPA 기반: 하나의 변경사항을 반영하기 위해 전체 페이지 Re-load
