3. React Basics

Udemy - Complete React Developer

3. React Basics

Create React App

facebook에서 만든 react app 제작 툴
babel, webpack등을 미리 설정해 초보 사용자들도 app을 쉽게 제작하도록 도와줌
npx create-react-app 프로젝트명
프로젝트명의 폴더가 생성!

npm, yarn

npm은 nodejs에서 만든건데,
몇가지 이슈가 있어 facebook에서 yarn 만듦

react-scripts

start, build, test, eject를 쉽게 할 수 있도록
뒷단에서 웹펙이니 바벨이니 하는 것들을 작동시켜줌

작동되는 스크립트 파일들
https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/scripts

• start : WebpackDevServer를 이용해 소스를 띄움
  기본적으로 3000 포트 사용, hot-reload적용

• build : src에 있는 코드로 babel, webpack 작업을 거쳐 /build 생성

• test :

• eject : 숨겨진 설정들을 표시해서 customize 할 수 있음.
  이제 뒷단의 일들도 직접 관리해야하고, 원복 안됨

build 과정

babel: 내가 짠 js 소스를 모든 브라우저(옛날 브라우저 포함)에서 이해할수 있도록 변환
webpack: 번들링, optimizing, minify

index.js

React : JS파일 안에서 html처럼 스크립트를 짤 수 있게 해줌
ReactDOM : 진짜 DOM과 소통

React

Class Component

함수로도, 클래스로도 html을 반환하는것은 가능
(과거에는) class인 경우가 더 많은 기능이 들어감

js, jsx

JSX가 반환되는 경우 확장자를 .jsx로 하여 알아보기 쉽게 써도 되고
그냥 js로 써도 된다
개인 선호 차이

컴포넌트로 쪼갰을때 장점

1. 작을수록 재사용하기 쉬움 (많은 로직을 담을수록 재사용 어려움)
2. 작을수록 테스트 쉬움
3. prop/state 변경으로 다시 그릴때 경제적
   -> 타이틀에 맞는 역할만 딱 갖는 작은 컴포넌트로 만들어보자

setState(updater, [callback]) : async 동작

JSX의 Synthetic Event

JSX: <input onChange={...}/> 는 HTML의 onchange 와 다르다
바로 dom을 변형시키는 대신 react가 이 이벤트를 캐치,
onChange에 지정된 행동을 실행시킨다

이벤트 발생시 동작순서

이벤트 발생(바로 DOM을 고치지 않음)
props/state의 변화
render() 계산
DOM작업

DOM작업 순서

실제DOM 복사하여 가상DOM생성
render() 메소드 기반으로 변경될 모양의 가상DOM 계산
실제DOM과 가상DOM을 비교하여, 다른부분만 다시그리기
(실제 화면을 그리는데 리소스가 많이 필요하므로, 변경없으면 다시 안그리니까 이득)