react의 기초 개념 정리

1. React101
임광규
2020.ReactJS 1

2. 왜리액트인가?
.자바스크랩트사용
개발언어순위7위랭킹
.Front-end구조화제공
MVC,MVP,MVVM
2020.ReactJS 2

3. 리액트의이해
ReactJS목표
페이스북개발팀이최대한성능을아끼고편안한사용자경험을제공하면서구현하고자개발
지속적으로데이터가변화하는대규모애플리케이션구축
특징
.MVC,MVP등과달리오직 V(View) 만신경쓰는라이브러리
.컴포넌트기반의동작과정의
.최적의성능을위한랜더링지원
2020.ReactJS 3

4. 랜더링
초기랜더링⇒조화과정(업데이트과정)
랜더링은render함수를통해이루어집니다.
render() { ... }
초기랜더시컴포넌트를랜더링하고이를HTML마크업으로만들고,DOM요소안에주입합니다.
2020.ReactJS 4

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

6. VirtualDom-2
리액트에서데이터가변하여실제DOM을업데이트할때다음절차진행
.데이터를업데이트하면전체UIVirtualDOM에리렌더링
.이전VirtualDOM에있던내용과현재내용비교
.바뀐부분만실제DOM에적용
VirtualDOM사용한다고무조건빠른것은아님!
React16.9.0VSVanilla[WC]1.0.0
2020.ReactJS 6

7. 기타특징
수많은라이브러리제공
ReactJS+다른프레임워크혼용가능
2020.ReactJS 7

8. 작업환경준비
Ubuntu20.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
2020.ReactJS 8

9. VSCODE설치
sudo snap install --classic code
VSCODE추천확장프로그램
.ESLint
.ReactjsCodeSnippets
.Prettier-codeformatter
2020.ReactJS 9

10. GIT설치
sudo apt-get install git-all
2020.ReactJS 10

11. ReactJS프로젝트생성
yarn create react-app hello-react
# OR
npx create-react-app hello-react
2020.ReactJS 11

12. 뽀나스
온라인ReactJS개발
2020.ReactJS 12