😤 12/17 내배캠 React 35일차

🐜 오늘 할 일

• react입문, 숙련 복습
• react심화 강의 

---

📆 계획표

시간	내용	결과
9:00 ~ 15:00	react입문, 숙련 복습	⛈
15:00 ~ 21:00	숙련 todolist만들기

---

 

👩🏼‍🌾 오늘의 줍줍 " " 🌾🌾

 

심화강의 redux

React Life-Cycle.

mount-unmout

Redux

redux안에 store라는 global 상태가 있고, 그 속에 reducer들이 있다 

즉, redux는 reducer를 포함한 store라고 할 수 있다.

그리고 어떤 action을 일으키는 것을 dispatch라고 한다

reducer : 변화를 일으키는 함수, 즉, reducer는 함수다! store에 있는 데이터를 바꿔주는 역할을 reducer가 한다(여기서 발생하는 action은 dispatch이다!)

 

Props Drilling : state를 components트리의 한부분에서 다른 부분으로 전달하는 방법 (부모-> 자식)

local state : 지역 상태

global state : 전역 상태

 

combineReducers()

redux는 action -> dispatch -> reducer 순으로 동작한다.

어플리케이션이 복잡해지게 되면 reducer 부분을 여러개로 나눠야 하는 경우가 발생한다.

combineReducers는 여러개의 독집적인 reducer의 반환 값을 하나의 상태 객체로 만들어준다.

 

Action creator

사용이유 

- 휴먼에러 방지 : 자동완성 보조기능이 제공되기 때문에 ~ 

- 코드 가독성이 높아진다

 

Payload

 

Ducks pattern : 개발자들간의 효율적이고 정확한 협업을 위해 만들어진 패턴

- reduce함수를 export default한다

- action creator들을 export한다

- action의 type은 App, reducer, action-type의 형태로 작성한다

 

 

 

정리 : reducer로 보내는 action객체에 어떤 정보를 같이 담아 보내고자 한다면, payload를 이용한다.

payload는  action creator를 생성할 때 매개변수 자리에서 받을 준비를 하고, 반환하는 action 객체에 payload라는 key와 받은 매개변수를 value로 하여 구현을 한다

reducer에서 payload를 사용하고자 할 때는 action.payload 라고 사용할 수 있다

es6에서 key와 value가 같으면 축약해서 작성할 수 있다

Ducks pattern은 Erik Rasmussen이 제안했고, 현재 redux module 작성방법의 정석으로 여겨지고 있다.

 

 

react 숙련 주차의 내용들이 아직까지도 머릿속에 잘 들어오질 않아서 계속 반복재생중이다.

todo-list도 구현해보고, 빨리 심화강의를 숙지해서 새로운걸 만들어보고 싶다.