1. 리액트란
01. 리액트는 프레임워크가 아닌 라이브러리
리액트는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용된다.
- 웹 앱을 개발하는 다른 툴과 비교 (Vue, Angualar)
| Vue, Angualar | React |
| 프레임워크 | 라이브러리 |
- 프레임워크와 라이브러리의 차이
프레임워크란 ?
→ 앱을 개발하기 위해 필요한 것들을 제공.
#개발자가 개발을 쉽게 할 수 있도록 뼈대를 제공하는 것이라고 할 수 있겠다.
라이브러리란 ?
→ 특정 기능을 모듈화(Modularization, 생산성·최적화·관리에 용이하게 모듈단위로 분할하는 것) 해놓은 것.
#재사용이 가능한 기능을 미리 구현해놓은 것이라고 할 수 있겠다.
코드는 프레임워크에 의해 사용된다.
→ 코드는 프레임워크의 틀 안에서 수동적으로 동작한다.
반면, 라이브러리는 개발자가 코드를 작성하며 라이브러리를 가져다 쓰게 된다.
→ 코드 안에서 라이브러리를 능동적으로 호출하여 사용한다.
- 리액트가 라이브러리인 이유
리액트는 전적으로 UI를 렌더링 하는 데 관여한다.
화면을 바꾸는 라우팅은 react-router-dom 모듈을, 상태 관리를 위해 redux, mobx 등 여러 모듈을 사용하며 빌드를 위해 webpack, npm 등의 모듈을, 테스팅을 위해 Eslint, Mocha 등을 이용한다.
#즉, 모듈을 이용하므로 라이브러리라는 것
02. 리액트 컴포넌트
리액트는 여러 컴포넌트를 이용해서 웹 앱을 개발하게 된다.
- 컴포넌트(Component)란 ?
리액트로 만들어진 앱을 이루는 최소한의 단위
인스타그램 페이지는 프로필 컴포넌트, 스토리 컴포넌트, 포스트 컴포넌트 등 다양한 컴포넌트로 구성되어 있다.
→ 다른 곳에서 컴포넌트를 사용할 수도 있고, 여러 명이 각자 맡은 컴포넌트를 동시에 수정할 수도 있다.
- 리액트 컴포넌트의 종류
리액트 컴포넌트는 두가지가 있다.
클래스형 컴포넌트(Class Components), 함수형 컴포넌트(Functional Components)
→ 과거 클래스형 컴포넌트를 주로 사용했으나, 리액트 Hook이 발표된 이후 함수형 컴포넌트를 주로 사용한다.
#자세한 것은 개발을 하면서 알아보자.
03. 브라우저가 그려지는 원리와 가상돔
리액트의 주요 특징 중 하나는 가상돔을 사용한다는 것이다.
- 웹 페이지 빌드 과정(Critical Rendering Path CRP)
어떤 인터렉션에 의해 DOM에 변화가 발생하면, 그때마다 Render Tree 재생성.
→ 불필요한 과정을 거치게 되니, 불필요하게 DOM을 조작하는 비용이 발생한다.
- 가상 돔(Virtual Dom)
실제 DOM을 메모리에 복사해준 것.
데이터가 바뀌면 가상돔에 렌더링 → 이전 돔과 비교하여 바뀐 부분만 실제 돔에 적용
→ 바뀐 부분을 한 번에 묶어서 적용하므로 DOM을 조작하는 비용을 줄이게 된다.
(이때 바뀐 부분을 찾는 과정을 Diffing, 실제 돔에 적용하는 것을 재조정reconcilliation이라고 한다.)
04. 리액트 설치를 위해 필요한 것들
Node.js와 npm을 설치해야하는데, Node.js를 받을 때 npm도 같이 설치된다.
- Node.js
크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임
→ 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있다.
- Node.js가 필요한 이유
리액트 앱은 웹 브라우저에서 실행되기 때문에 Node.js와 직접적인 연관은 없다.
그러나, 프로젝트를 개발하는 주요 도구들이 Node.js를 사용한다.
- Visual Studio Code (VS Code)
마이크로소프트에서 오픈소스로 개발하고 있는 소스 코드 에디터
→ 주로 사용하므로 해당 강의에서는 VS Code 사용
05. Create React App 을 이용해서 리액트 설치하기
npx create-react-app <폴더 이름>이라는 명령어로 설치 가능
#최근에는 Webpack, Babel 등의 설정이 자동으로
- npx ?
노드 패키지 실행을 도와주는 도구
npm 레지스트리(라이브러리들이 저장된 곳)에서 creat-react-app 패키지를 실행하여 리액트를 설치해준다.
- 원래 리액트 앱 설치하는 방법
Webpack, Babel 모듈 설치 후 설정해야 리액트 앱을 실행할 수 있었다.
- Webpack 웹팩이란 ?
오픈 소스 자바스크립트 모듈 번들러
→ 여러개로 나눠져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리.
- Webpack 장점
① 여러 파일을 자바스크립트 코드로 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다.
② 모듈 단위로 개발이 가능하며, 가독성과 유지보수가 쉽다.
- Babel 이란 ?
최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 사용할 수 있게 변환 시켜주는 라이브러리
# 정리
- 리액트는 프레임워크가 아니라 라이브러리다.
- 여러 컴포넌트를 이용해서 웹 앱 개발을 한다.
- 리액트는 가상 돔(Virtual Dom)을 사용한다.
- Node.js 와 VS Code 를 설치해야 한다.
- npx create-react-app 이라는 명령어로 리액트를 설치한다.