React 1-

Angular: 배우기 어려움
Vue: 앵귤러 버전 1과 비슷, 배우기 쉬우나 깊이 들어가면 코드 지저분해짐

React: 2가지 컴포넌트 존재

클래스형 컴포넌트(옛날에 많이 씀, 코드는 함수형보다 깔끔하나 함수형보다 어려움, 개발자들이 클래스형을 익숙해 함) =>
함수형 컴포넌트 (2020 봄부터 함수형을 더 많이 쓰는 걸로 바뀜)

훅

-useState[]
-useEffect[]

컴포넌트: UI를 구성하는 조각, 독립적 분리, 재사용 목적으로 사용

React 설치:

create react app: 번거로운 개발환경 구성(개발 서버, webpack, babel 등) 없이 react를 바로 시작

npm start: react 프로젝트 개발 서버 시작
npm run build: 배포를 위해 앱을 정적(static) 파일로 번들(bundle) => github 할 줄 아는 사람은 필요 X

진도

1일차: React에 필요한 es6 정리, 리액트 형식
2일차 ~ 4일차: 클래스 컴포넌트(미니 프로젝트 같은 응용 없이 문법만 배울 것)
5일차: 라이프 사이클(클래스와 연결된 것), 함수형 컴포넌트
6일차 ~ : 함수형 컴포넌트, hooks
외부데이터: axios, fetch
css: sass, styled-components
싱글페이지: 라우터
상태관리: context
리덕스
리덕스 툴킷
리덕스 미들웨어
json-server
예제) 함수형 컴포넌트로만 응용 예제
할일, 고객관리, 멜론, 영화사이트 유형, 이미지 검색 등

수업 순서

1. node js 또는 yarn(훨씬 빠름) 설치
   node js:
   https://nodejs.org/ko/ => LTS 버전

yarn:
https://classic.yarnpkg.com/en/docs/install#windows-stable
npm install --global yarn 또는 클릭 다운로드 후 재부팅

2. vs code 확장 설치
   vs code 확장설치

Live Server
Reactjs code snippets (필요 X)
Korean Language Pack for Visual Studio Code
Auto Close Tag
Auto Complete Tag
Auto Import
Auto Rename Tag

3. git init
   npm install --save
   create .gitignore and include node_modules

4. create temp.html

5. connect to github

React에 필요한 es6 정리

1. destructuring assignment

     const data = {a: 10, b: 20, c: 30};
     console.log(data.a, data.b, data.c);  // 10, 20, 30
   
     const {a, b, c} = data;
     console.log(a, b, c); // 10, 20, 30

2. react uses ===

3. react doesn't use if / for
   instead of If => use ternary operator(?), &&, ||
   instead of For => APIs

4. react uses const most often (const > let > var)

5. arr.concat() to copy, remove data without affecting the original data
   *don't use .push()

6. arr.map() returns something / arr.forEach() doesn't return something

7. arr.find() returns only 1 value / arr.filter() returns an array

8. str.indexOf / `` + match()
   match() is not case sensitive, thus using match() is better

9. arr.concat() vs ...arr
   arr.concat() copies data and add data
   ...arr copies, add and 'change' data