[Node.js, React] Redux기초/ Redux UP/ React Hooks

26강 Redux기초

https://youtu.be/dJC_uAR7d60

Redux: 상태 관리 라이브러리(state container)

React에는 Props(부모와 자식 컴포넌트간의 소통(데이터 교환) 시 사용, 자식은 부모로부터 받을 수만 있고 스스로 변경X)와 State(하나의 컴포넌트 안에서 값을 변경할 때 사용)라는 개념이 있다.

- Redux Store가 모든 state을 관리

 

* Action: 변경시키려는 리액션(?). 객체 형식

* Reducer: 어떻게 state가 변하는지 보여주고 최종 값 리턴. 보통 기능별(? 컴포넌트별)로 reducer가 각각 있음.

리덕스를 이용해 액션을 보내줌

액션은 user_action.js에 적어(?)둔 함수. 리턴 값 중 타입은 type.js에 따로 보관하여 import해서 사용

타입을 받아서 처리하는 리듀서 user_reducer.js에도 타입을 import 해야 함

 

27강 Redux UP

https://youtu.be/pLrwhuYvxTw

- Store에서는 객체 형식으로만 action을 받아 state 변경

* redux-thunk: Dispatch에게 Function을 받는 방법 알려줌

* redux-promise: Dispatch에게 Promise를 받는 방법 알려줌

- redux devtool 다운받아서 앱에 연결해서 사용(9분 47초)

- client/src/_reducers/index.js에서 combineReducer를 이용해 여러 기능에 해당하는 여러 가지 reducer를 연결(묶음)

 

28강 React Hooks

https://youtu.be/L_mN8n6FHDg

1. React Component

2. Class component: 더 많은 기능, 복잡하고 긴 코드, 느린 성능
constructor(state등 지정) → render(화면에 랜더링하는 부분) → componentDidMount(데이터 가져오고, 기능 작성)

Functional component: 한정적인 기능, 짧고 단순한 코드, 빠른 성능 → Hooks을 이용해 기능 확장: useState →(생략?) → useEffect(데이터 가져오고, 기능 작성)

---

인프런 강의 링크: https://inf.run/b3Ao

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