고정 헤더 영역
상세 컨텐츠
본문
React란?
UI 구축을 위한 JavaScript library.
SPA 기반의 프론트엔드 개발 프레임워크 중 하나.
컴포넌트 단위의 독립적인 블록을 이용한 개발 방법 사용.
비슷한 프레임워크 : AngularJS, VueJS
SPA(Single Page Application) 아키텍처
정의
Single Page Application, 즉 한 개의 페이지로 이루어진 애플리케이션.
MPA(Multi Page Application)과는 상반된 개념.
기존 MPA의 문제점
SNS에서 '좋아요'를 누를 때마다 웹사이트가 다시 로딩된다면,
- 리랜더링(re-rendering)이 너무 많이 이루어짐.
- 계속해서 페이지가 깜빡거리며 UX(사용자경험)가 안 좋아짐.
➔ SPA는 '좋아요'에 해당되는 요소만 색이 채워지며 페이지 전체가 깜박거리지 않음.
SPA의 특징과 장점
- 딱 한 개의 페이지(Single Page)로 구성된 웹 앱.
- 서버에 1회 리소스를 요청 = html 파일이 1개이다.
- 그 이후에는 필요할 때, 데이터만 받아와서 기존 페이지를 ‘수정’해주는 방식으로 화면을 갱신함.
- 사용자 입장에선 화면에 깜빡임이 없어 굉장히 자연스러운 UX(User Experience)를 구현할 수 있다.
- 비슷한 기술들 → Angular, Vue(구현의 차이는 각각 존재함.)
SPA의 단점
SEO(검색엔진최적화) 문제
SEO(Search Engine Optimization)을 위해서는 HTML 페이지 전체가 필요한데, SPA 페이지의 HTML 파일들은 아래와 같이 생겨 검색엔진 즉, 로봇이 내용을 찾을 수가 없다.(MPA는 HTML 파일이 많아 검색엔진이 내용을 찾을 수 있음.) ➔ Next.js : SEO 문제를 보완한 React 베이스의 프레임워크
<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 프레임워크의 종류
- ReactJS
- 페이스북이 만들고 유지보수함.
- 선발주자인 만큼 막강한 커뮤니티와 그에 따른 방대한 자료를 보유함.
- VueJS
- easy to learn, simple!
- 꾸준히 성장하는 중이지만 후발주자라 어쩔 수 없이 적은 market share.
- AngularJS
- 출시된 지 오래되어 안정적인 프레임워크임.
- hard to learn, heavy. 그래서 나온 지 꽤 됐음에도 점유율은 낮음.
React를 알아야 하는 이유
- NPM trends
2. React Native와의 상생(모바일 애플리케이션 개발을 할 수 있음).
3. 심지어는 VR에서까지 활용 가능.
3. 막강한 커뮤니티
4. 많은 채용공고에서 필수 소양
컴포넌트란?
리액트가 채택한 개발방법
컴포넌트 = 벽돌
헤더 컴포넌트, 바디 컴포넌트, 푸터 컴포넌트를 만들어서 벽돌을 쌓아 올려 집을 짓듯이 개발을 하는 것.
어떤 웹 사이트에 변경이 일어났다고 했을 때
- SPA 기반 : 컴포넌트 단위로 변경사항을 반영(=렌더링) 하기 때문에 깜빡임 X
- MPA 기반 : 하나의 변경사항을 반영하기 위해 전체 페이지 Re-load
'TIL' 카테고리의 다른 글
| [TIL] React 입문 - 개발 환경 세팅을 위한 필수 프로그램 (0) | 2023.06.14 |
|---|---|
| [TIL] React 입문 - 리액트에서 자주 사용되는 ES6 문법(변수와 상수, JavaScript Scope, Object 선언, 객체 복사, Template Literals ,구조분해할당, 전개 연산자(...), 화살표 함수 (1) | 2023.06.13 |
| GIT & GitHub (0) | 2023.05.24 |
| [TIL] JavaScript 기초 - JS 기본 문법, 문, 배열과 객체 (0) | 2023.05.23 |
| [TIL] JavaScript 기초 - JS 언어의 특징과 역사, 표현식과 문, 함수 생성 (0) | 2023.05.22 |
댓글 영역