React란?
A JavaScript library for building user interfaces
‘React.js’는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용합니다.
비슷한 프레임워크인 AngularJS, VueJS보다 월등히 인기가 많습니다.
왜 인기가 많을까?
SPA프레임워크 중 선발주자인 만큼 막강한 커뮤니티와 자료를 보유하고 있기 때문?
SPA와MPA
Single Page Application, 한 개의 페이지로 이루어진 애플리케이션으로
MPA(Multi Page Application)과는 상반된 개념입니다.
기존 MPA 방식은 리렌더링이 많아지기 때문에 용이하지 않습니다.
SPA의 특징과 장점
- 딱 한개의 페이지(Single Page)로 구성된 웹 앱입니다.
- 서버에 1회 리소스를 요청합니다. (index.html)
- 그 이후에는 필요할 때, 데이터만 받아와서 기존 페이지를 ‘수정’해주는 방식으로 화면을 수정합니다.(Javascript에서 동적으로 구현)
- 사용자 입장에선 굉장히 자연스러운 UX(User Experience)를 구현할 수 있습니다.
SPA의 단점
SEO(Search Engine Organization)에 약하다.
<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>SPA 페이지의 HTML 파일들은 모두 위와 같은 코드로 되어 있기에 검색엔진에 약합니다.
SPA 프레임워크의 종류
- ReactJS
- 페이스북이 만들고 유지보수합니다.
- 선발주자인 만큼 막강한 커뮤니티와 자료를 보유하고 있습니다.
- VueJS
- easy to learn, simple!
- 꾸준히 성장하는 중입니다.
- 후발주자라 어쩔 수 없는 market share..!!(자료가 적습니다.)
- AngularJS
- 안정적인 프레임워크!
- hard to learn, heavy. 그래서 나온지 꽤 됐음에도 점유율은 낮습니다.
왜 React인가?
1.NPM trends
2. RN(React Native)와의 상생, 심지어는 VR에서까지 활용할 수 있습니다.
3. 막강한 커뮤니티를 보유하고 있습니다.
4. 채용공고가 많습니다.
컴포넌트란?
리액트가 채택한 개발방법
[컴포넌트 = 벽돌] 이라고 이해하면 쉬울 것 같습니다. 벽돌을 쌓아 집을 짓는다.
헤더 컴포넌트, 바디 컴포넌트, 푸터 컴포넌트 만들어서 벽돌을 쌓아 올리듯이 개발을 하는 겁니다.
어떤 웹 사이트에 변경이 일어났다고 했을 때
- SPA 기반 : 컴포넌트 단위로 변경사항을 반영하기 때문에 깜빡임이 없습니다.(이걸 렌더링이라고 합니다.)
- MPA 기반 : 하나의 변경사항을 반영하기 위해 전체 페이지 Re-load 필요합니다.
더 공부 해볼 것!
SEO가 무엇인지?
->검색 엔진 최적화로써 검색엔진이 콘텐츠를 이해하고 제공하도록 돕는 것입니다.
SEO가 약한 React에서 극복할수 있는 방법이 무엇이 있는지?
->next.js를 배워보자!
