[쇼핑몰 만들기] React JS - Section 1 / Redux / React Hooks

📒 참고 강의

[무료] 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 - 인프런 | 강의

---

🟣백서버와 프론트 서버 같이 켜는법

npm install concurrently --save

index.js 파일 "scripts"에 아래 코드 추가하면 npm run dev 하면 백서버, 프론트서버 같이 켤 수 있음 

"dev": "concurrently \"npm run backend\" \"npm run start --prefix client\""

 

🟣CSS Framework

-CSS Framework 사용 이유 : 기능 만드는데 집중하기 위해서

-CSS Framework 종류 for React JS : Material UI, React Bootstrap, Semantic UI, And Design, Materialize...

! 이번에는 ant design 사용할거임 !

 

#ant design

cd client

npm install antd --save

 

Ant Design of React - Ant Design

 

🟣Redux

state을 관리하는 툴 / Redux is a predictable state container for JavaScript apps. 상태 관리 라이브러리

 

-Props vs State

Props	State
1. properties 줄임말 2. Props are how components talk to each other 3. Props flow downwards from the parent compnent 4. Props are immutable from the child perspective if you want to change that value? the parent should jst change its internal state	1. parent component에서 child component로 data를 보내는게 아닌 그 component 안에서 데이터를 전달하려면? State로 예를 들어, 검색 창에 글을 입력할 때 글이 변하는 것은  state를 바꿈 2. State is mutable 3.State이 변하면 re-render됨

한방향으로만 흐름

Action은 객체 형식

 

- Redux 설치법

client 폴더에서 dependency 다운받기

npm install redux react-redux redux-promise redux-thunk --save

 

- redux-promise / redux-thunkredux 역할

store 변경하는 법 : dispatch action으로 변경가능

store에서 언제가 객체형식으로 된 action을 받는 것은 아님 / promise, functions 형태로 받을수도 있음

> redux store은 오직 객체 형식만 받을 수 있으니까 redux-thunk는 functions을 받는 법을 알려주고 redux-promise는 promise 받는 법 알려주는 역할을 함

 

- redux extension 추가하기

Redux DevTools

 

🟣React vs React Hooks

-React Component

Class Component	Functional Component
Provide more features 더 많은 기능들	Provide less features 제공하는 기능이 한정적
Longer Code	Shorter Code
More Complex Code	Simpler Code
Slower Performance 느림	Faster Performance 성능이 비교적 좋음

 

React Hooks 생김 > Functional Component with simpler syntax and faster performance 사용할 수 있게 됨