ReactJS 101

임광규

왜 리액트인가?

1. 자바스크립트 사용
   • 개발 언어 순위 7위 랭킹
2. Front-end 구조화 제공
   • MVC, MVP, MVVM

리액트의 이해

ReactJS 목표

• 페이스북 개발팀이 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 개발
• 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축

특징

1. MVC, MVP 등과 달리 오직 V(View)만 신경 쓰는 라이브러리
2. 컴포넌트 기반의 동작과 정의
3. 최적의 성능을 위한 랜더링 지원

랜더링

초기 랜더링 ⇒ 조화 과정(업데이트 과정)

랜더링은 render 함수를 통해 이루어 집니다.

render() { ... }

초기 랜더시 컴포넌트를 랜더링 하고 이를 HTML 마크업으로 만들고, DOM 요소 안에 주입합니다.

Virtual DOM - 1

1. DOM ⇒ Document Object Model 객체로 문서 구조를 표현하는 방법(HTML, XML)
2. DOM은 동적 UI에 최적화 되어 있지 않음
3. 웹 브라우저가 DOM의 변화가 일어나면 많은 시간 허비
   1. CSS를 다시 연산 ⇒ 레이아웃 구성 ⇒ 페이지 리페인트
4. 리액트는 Virtual DOM 방식으로 DOM 업데이트를 추상화 하여 DOM 처리 횟수를 최소화 하고 효율적으로 진행

Virtual Dom - 2

리액트에서 데이터가 변하여 실제 DOM을 업데이트 할때 다음 절차 진행

1. 데이터를 업데이트하면 전체 UI Virtual DOM에 리렌더링
2. 이전 Virtual DOM에 있던 내용과 현재 내용 비교
3. 바뀐 부분만 실제 DOM에 적용

Virtual DOM 사용한다고 무조건 빠른 것은 아님!

React 16.9.0 VS Vanilla[WC] 1.0.0

기타 특징

• 수많은 라이브러리 제공
• ReactJS + 다른 프레임워크 혼용 가능

작업 환경 준비

Ubuntu 20.04 기준

Node.js & npm 설치

curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt install nodejs

Yarn 설치

curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

VSCODE 설치

sudo snap install --classic code

VSCODE 추천 확장 프로그램

1. ESLint
2. Reactjs Code Snippets
3. Prettier-code formatter

GIT 설치

sudo apt-get install git-all

ReactJS 프로젝트 생성

yarn create react-app hello-react
# OR
npx create-react-app hello-react

뽀나스

• 온라인 ReactJS 개발

추천 책 & 사이트

• velopert.log

• [개정판	리액트를 다루는 기술](https://ridibooks.com/books/754026976)