✔️ 1.React란?
리액트(react.js)란 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
‘React.js’는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용합니다.
비슷한 프레임워크인 AngularJS, VueJS보다 월등히 인기가 많아요!
1) SPA(Single Page Application)아키텍처
Single Page Application, 한 개의 페이지로 이루어진 애플리케이션 이라는 말이에요. MPA(Multi Page Application)과는 상반된 개념입니다.
기존 MPA의 문제점
- 좋아요 눌렀는데 웹사이트 다시 로딩
- 요즘 시대에는 리렌더링(re-rendering) 즉, 페이지가 갱신되는 상황이 엄-청나게 많기 때문에 계속해서 깜빡거리는현상
SPA의 특징과 장점
- 딱 한개의 페이지(Single Page)로 구성된 웹 앱입니다.
- 서버에 1회 리소스를 요청합니다.
- 그 이후에는 필요할 때, 데이터만 받아와서 기존 페이지를 ‘수정’해주는 방식으로 화면을 수정해요.
- 사용자 입장에선 깜빡임이 없죠. 굉장히 자연스러운 UX(User Experience)를 구현할 수 있습니다.
- 비슷한 기술들 → Angular, Vue(구현의 차이는 각각 존재해요)
SPA의 단점
1.SEO(Search Engine Optimization)을 위해서는 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>검색엔진 즉, 로봇이 찾을 수가 없다.
✔️ 2. SPA 프레임워크의 종류
Angular vs React vs Vue
- Angular
a. 안정적임 프레임워크
b. 배우기 어렵고 무겁다. 점유율이 낮다. - React
a.페이스북의 지속적인 관리와 함께 생태계가 활성화 되어있다
b.페이스북에서 관리하기 때문에 퀄리티를 유지하고 있다
c.많은 커뮤니티와 자료를 보유하고 있다. - Vue
a. 배우기 쉽다.
b. 꾸준히 성장하는 중이다.
c. 늦게 시작한 만큼 시장 자체가 좁다.
왜 React 인가?
- 리액트는 자바스크립트의 문법을 그대로 활용하기 때문에 편리성을 가지고 사용할 수 있다
- 페이스북의 지속적인 관리와 함께 생태계가 활성화 되어있다
- 리액트는 오픈소스 프로젝트이다. 즉, 누구나 코드를 볼 수 있고 수정 또는 새로운 기능을 제한할 수 있다
- 페이스북에서 관리하기 때문에 퀄리티를 유지하고 있다
- Angular나 Vue에 비해 컴포넌트가 단순하고 간단하게 정의되어 있다
[출처 : 스파르타코딩 React 입문주차 강의자료]
프론트엔드개발자를 목표로 공부중입니다.