[React] React란? 리액트의 개념과 설치

1- 리액트는 프레임워크가 아닌 라이브러리이다!

React 는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용된다.

Angular, vue는 프레임워크이며 React는 라이브러리이다.

라이브러리와 프레임워크

프레임워크: 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것
라이브러리: 어떠한 특정 기능을 모듈화 해놓은 것
프레임워크는 라이브러리를 포함하고 개발자가 작성한 소스 코드를 호출한다. 소스코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출한다.
호출관계: 프레임워크 → 소스코드 → 라이브러리

리액트는 전적으로 UI를 렌더링하는 데 관여한다. 그러나 웹 앱을 만들기위해서는 UI를 제외한 다른 요소들도 라우팅(페이지전환), 상태관리, 테스팅 또한 관리해야 한다.

• 라우팅: react-router-dom
• 상태관리: redux, recoil, mobx
• 테스트: Jest, Mocha, Eslint

---

2- 리액트 컴포넌트

리액트는 여러 컴포넌트를 이용하여 웹 앱을 개발한다. 컴포넌트란 리액트로 만들어진 앱을 이루는 최소한의 단위이다.
리액트는 여러 컴포넌트 조각으로 이루어져 있다.
인스타그램: 검색 컴포넌트, 프로필 컴포넌트, 스토리 컴포넌트, 포스트 컴포넌트,..
컴포넌트가 여러 개로 나누어져 있기 때문에 하나의 컴포넌트를 여러 곳에서 사용할 수 있다. 또한 여러 명이 각자 맡은 컴포넌트를 동시에 수정할 수 있다.

리액트 컴포넌트 종류

1. 클래스형 컴포넌트 (Class Component)

class App extends Component {
	render() {
		return <h1>안녕하세요.</h1>
	}
}

2. 함수형 컴포넌트 (Functional Component)

function App() {
	return <h1>안녕하세요.</h1>
}

기존에 리액트로 개발할 때는 클래스 컴포넌트를 이용하여 개발하였다. 그러나 리액트 Hooks 발표 이후부터는 함수형 컴포넌트를 이용해서 개발을 많이 한다. 그러나 기존의 코드가 클래스형으로 작성된 경우도 있기 때문에 둘다 알아두자.

---

3- 브라우저가 그려지는 원리와 가상돔

리액트는 가상돔을 사용한다

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

브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하기 전에 여러 단계가 있다.

https://dimension85.com/glossary/critical-render-path

• DOM tree 생성: 렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 렌더링할지 결정한다.
• Render tree 생성: 브라우저가 DOM과 CSSOM을 결합하는 곳이며, 이 프로세스는 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력한다. 즉 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함한다.
• Layout (reflow): 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계이다.
• Paint: 실제 화면에 그리는 단계이다.

어떤 인터렉션에 의해 DOM에 변화가 발생하면 그때마다 Render tree가 재생성되고 모든 요소들의 스타일을 다시 계산해야 한다. → 인터렉션이 많은 웹앱인 경우 비효율적이다.

가상 돔 Virtual DOM

가상 돔: 실제 DOM을 메모리에 복사해준 것
가상 돔은 재조정 (reconciliation) 으로 작동된다.

https://javascript.plainenglish.io/react-the-virtual-dom-comprehensive-guide-acd19c5e327a
*재조정이란? 데이터가 바뀌면 가상돔에 렌더링되고 이전에 생긴 가상돔에서 Diffing (이전 가상 돔과 바뀐 가상 돔을 비교해 바뀐 부분을 찾음)을 거쳐 바뀐 부분만 실제 돔에 적용시켜주는 것 (Diffing 하여 주황색을 찾은 후 Update: Reconciliation)
이러한 가상 돔 덕분에 만약 요소가 30개 변하였다고 하더라도 한 번에 묶어서 실제 돔 수정으로 처리하게 돼서 돔을 조작하는 비용을 줄이게 된다.

---

4- CRA(Create React App)를 이용한 리액트 설치

npx create-react-app <폴더 이름>

[이전 방식]: CRA를 통해 리액트를 설치하면 생략할 수 있음
1. Webpack
웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다.

1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다.
2. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다.

2. Babel
최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위하여 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환 시켜주는 라이브러리이다.