React란 무엇인가 23.10.31

728x90

팀과제 마무리후 이젠 본격적인 React 학습 과정을 시작했다

일단 React가 무었인지에 대해 알아보았다

0. React란 무엇인가?

A JavaScript library for building user interfaces
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

요약하면 리액트를 이용하여 UI(사용자 인터페이스)를 구성할수있다는것이다

function React ()
{웹 또는 앱 애플리케이션의 UI, 즉 보여지는 부분(프론트 엔드 영역)을 구축한다는 의미}

React.js’는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용합니다. 비슷한 프레임워크인 AngularJS, VueJS보다 월등히 인기가 많다

1.SPA란 ?

(Single Page Application) 한 개의 페이지로 이루어진 애플리케이션

기존의 MPA(Multi Page Application)과는 상반된 개념이다

기존 MPA의 문제점(아주 아주 간단한 설명)

어떤 페이지에서 좋아요(인터페이스 작용)을 할때마다 페이지가 새로고침된다면 (굉장히 불편하다)
리렌더링(re-rendering) 즉, 페이지가 갱신되는 상황이 엄-청나게 많기 때문에 계속해서 깜빡거린다..
UX (User experience) {사용자 경험} 품질 수직하락

1-1. SPA의 특징과 장점

딱 한개의 페이지(Single Page)로 구성된 웹 앱이다
서버에 1회 리소스를 요청한다 {리액트 사용시 index.html 파일은 단하나! 그외 구현필요파일은 JS로대체)
그 이후에는 필요할 때, 데이터만 받아와서 기존 페이지를 ‘수정’해주는 방식으로 화면을 수정한다.
사용자 입장에선 깜빡임이 없음. 굉장히 자연스러운 UX(User Experience)를 구현할 수 있다.
비슷한 기술들 → Angular, Vue(구현의 차이는 각각 존재한다)

1-2. SPA의 단점 : SEO에 약하다..

SEO(Search Engine Organization) : 검색엔진 최적화, (즉 검색엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스입니다)

을 위해서는 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>

검색엔진 즉, 로봇이 찾을 수가 없다. SAP 는html에 뭐 적혀있는게 없으니 내용을 찾을것도 없습니다
그러나 기존 MPA는 이미 만들어진 HTML파일이 서버에 다 들어가있기때문에 찾기 쉽다

이러한 SAP의 약저을 보안하기위해 최근에는 Next.js 가 많이 사용되고있습니다

2.그렇다면 우리는 왜 React를📚 배우는가 📖?

2-1.SPA 프레임워크의 종류와 특징비교

ReactJS
1. 페이스북(현:META)이 만들고 유지보수한다
2. 선발주자인 만큼 막강한 커뮤니티와 자료를 보유하고 있다( 모를때 검색하면 다나온다는 말씀!)
VueJS
1. easy to learn, simple! (간단하고 배우기가 쉽다!)
2. 꾸준히 성장하는 중이다.↗
3. 후발주자라 어쩔 수 없는 market share..!! 자료가 적은편이다( 현재는 공식문서에 의존할수밖에없는 상황..)
AngularJS
1. 안정적인 프레임워크!
2. hard to learn, heavy. 그래서 나온지 꽤 됐음에도 점유율이 낮은편

2-2. 리액트를 배워야하는 이유!

1.꽤 오랜시간동안 React가 1위의 점유율을 보여주고있다

2. RN(React Native)와의 상생, 모바일 애플리케이션도 개발가능 심지어는 VR에서까지 활용할 수 있다.

3. 막강한 커뮤니티

4.채용공고가 많다...! 최근 트렌드는 웹개발자 필수 소양이 리액트라고 정해졌다합니다... 그만큼 대세라는점!

3. 컴포넌트란?

리액트가 채택한 개발방법

[컴포넌트 = 벽돌] 이라고 이해하면 쉬울 것 같습니다. 벽돌을 쌓아 집을 짓는다.

헤더 컴포넌트, 바디 컴포넌트, 푸터 컴포넌트 만들어서 벽돌을 쌓아 올리듯이 개발을 합니다

(인스타를 예를 들면 사람모양 아이콘도,그밑에 댓글창도,그밑의 하트도 전부 컴포넌트라고 생각하면편합니다)

예를들면 어떤 웹 사이트에 변경이 일어났다고 했을 때

SPA 기반 : 컴포넌트 단위로 변경사항을 반영하기 때문에 깜빡임 X(이걸 렌더링이라고 한다)
MPA 기반 : 하나의 변경사항을 반영하기 위해 전체 페이지 Re-load

이상으로 오늘 배워본 React 간단 정리였습니다

728x90

'Today I Learned (TIL)' 카테고리의 다른 글

CRA(Create React App) 23.11.02 (0)	2023.11.02
React 에서 자주 쓰는 JavaScript ES6문법 정리 23.11.01 (0)	2023.11.01
자주쓰는 css모음 23.10.30 (0)	2023.10.30
23.10.29 (1)	2023.10.29
첫 팀 프로젝트를 마치며... 23.10.28 (2)	2023.10.28

나의 코딩일지

React란 무엇인가 23.10.31

0. React란 무엇인가?