React 개념

* 공부를 진행하며 지속적으로 업데이트할 예정 (잘못된 정보가 있거나 부가설명이 필요한 부분이 있을 수 있음.)

 

리액트는 UI관련 라이브러리로써 ajax 등 데이터관련된 작업은 불가하지만, 라이브러리기 때문에 다른 프레임워크 또는 서드 라이브러리와 함께 사용하여 데이터통신 가능.

 

 

 

※ 특징

1. Component

UI를 부품화하여 재사용 용이

 

2. JSX 문법 사용

자바스크립트 확장문법으로 엘리먼트 요소를 생성하고 변수 또는 함수를선언하여 엘리먼트에 적용할 수 있음

 

3. IE8이하 지원 안 함. => 리액터 버전 14이하를 사용하여 해결 가능.(어떤 프로그램과 함께 써야 한다고 하는데 아직 알아내지 못 함)

 

4. Virtual DOM

기존코드와 수정된 코드를 비교하여 수정된 부분만 변경시킴

 

5. 크로스 플랫폼

모바일 & PC 호환가능

 

6. Single Page Application(SPA) - 하나의 페이지에서 모든 걸 처리.

참고 : https://velog.io/@pkbird/Single-Page-Application

Multi Page Application & Single Page Application

 

 

 

※ 단점

1.클라어인트 렌더링의 개념이 적용된 라이브러리로써 장점도 있지만 단점도 있음.

 

서버(Sever Side Rendering) & 클라이언트 렌더링(Client Side Rendering)

CSR 클라이언트 측에서 랜더링하려면 처음 로딩할 때 페이지별로 필요한 JS파일 등을 다 불러와야만 함.

-> 첫 요청 후의 동작은 빠르나 첫 요청이 오래 걸림.

 

위에 두 렌더링 개념과 관련된 개념

- Time To View (=사이트를 보는데까지의 시간)

요청 - 서버에서 HTML을 응답 - HTML에 링크된 JS를 요청 - 응답받은 후 웹사이트가 보여짐(이전단계까지는 페이지 로딩 중으로 아무것도 안 보임)

 

- Time To Interact (=사용자와 웹사이트간의 소통이 가능한데까지의 시간 / 사용자가 페이지를 볼 수 있는 시간과 실질적으로 종작할 수 있는데까지의 텀이 있음.)

요청 - 서버에서 동적데이터까지 처리된 HTML을 응답(이벤트를 처리[동적처리]하는 JS는 전달해 주지 않음) - 서버에 이벤트를 처리하는 JS 요청 - 응답받음 - 클릭 이벤트 등 소통이 가능

 

2. 페이지 캐싱이 안 됨 (더 알아보는 중)

 

3. Search Engine Optimization 검색엔진 최적화가 안됨 (더 알아보는 중)

처음 요청 후 응답받은 HTML은 빈 페이지이고, 해당 사이트를 크롤링 시 빈페이지로 인식하여 검색이 안 됨.

 

 

다음 글 : 2021.10.29 - [UI/React] - React 시작하기 / Node.js 설치 / React app 생성

React 시작하기 / Node.js 설치 / React app 생성