[React] React 기본 개념

📌 프레임워크 vs 라이브러리

프레임워크 : 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것 (Vue.js와 Angular는 프레임워크.)

라이브러리 : 어떠한 특정 기능을 모듈화 해놓은 것

 

프레임워크 ⊃ 라이브러리 여러개

 

📌 React

: 사용자 인터페이스(UI)를 만들기 위한 JS 라이브러리

(라우팅(페이지 이동), 상태 관리, 테스트 등은 다른 라이브러리를 사용해서 react에서 가능하게 하는 것이다!)

 

장점

1. 상대적으로 배우기 쉬운 라이브러리

2. 여러 기능들을 위해 만들어져 있는 라이브러리 환경

3. 많은 기업들의 사용으로 검증됨

 

 

📌 React 컴포넌트

리액트로 이루어진 앱을 이루는 최소 단위.

여러 컴포넌트가 모여 웹 앱이 만들어진다.

 

ex) 검색 컴포넌트, 포스트 컴포넌트, 프로필 컴포넌트 등등

 

장점

하나의 컴포넌트를 여러 곳에서 재사용 가능, 여러 명이 각각 맡은 컴포넌트를 동시에 수정 가능.

 

종류

1. 클래스형 컴포넌트 

2. 함수형 컴포넌트 : 요즘 자주 사용

 

 

📌 웹 페이지 빌드 과정 (CRP: Critical Rendering Path)

웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정

 

http://marcysutton.github.io/a11y-perf/#/

 

1. DOM tree 생성

: 렌더 엔진이 문서를 읽어서 파싱하고 어떤 내용을 페이지에 렌더링할지 결정

 

2. Render Tree 생성

: DOM과 CSSOM 결헙

: 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 render tree 생성

 

3. Layout (reflow)

: 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계

 

4. 화면에 그리기 (Paint)

 

 

위 방식에서의 문제점

 DOM에 변화가 발생할 때마다 Render Tree가 재생성되고, layout, paint 과정을 다시 거치게 됨.

-> DOM을 조작하는 비용이 크다!!!

 

해결방법

가상 돔(Virtual Dom) 사용하기 (React에서 사용되는 방법)

 

- 가상 돔이란?
 : 실제 DOM을 메모리에 복사해준 것

https://velog.io/@cheej10/%EA%B0%80%EC%83%81-%EB%8F%94

데이터가 바뀌면 가상돔에 렌더링.
-> 이전에 생긴 가상돔과 비교해 바뀐 부분 찾기 (diffing)
-> 바뀐 부분만 실제 돔에 적용(reconciliation, 재조정)

 

-> 돔을 조작하는 비용이 줄어든다.

 

📌 React 사용 준비

react를 사용하기 위해서 설치해줘야 할 것이 있다.

 

 

과거)

  📌 웹팩 (Webpack)
오픈 소스 JS 모듈 번들러.
여러개로 나뉜 파일들을 하나의 JS 코드로 압축하고 최적화하는 라이브러리.

장점
1. 로딩에 대한 네트워크 비용 감소
2. 모듈 단위로 개발하여 가독성과 유지보수가 쉽다.

  📌 바벨 (Babel)
최신 JS 문법을 (최신 JS 문법을 지원하지 않는)구형 브라우저에서도 돌 수 있게 변환시켜주는 라이브러리

 

현재)

터미널에 명령어 하나만 입력해주면 알아서 설치가 된다!

npx create-react-app ./

npx : 노드 패키지 실행을 도와주는 도구

 npm 레지스트리(많은 라이브러리들이 저장된 곳)에 있는 create-react-app 이라는 패키지를 폴더에서 실행해 리액트를 설치한다.