redux
상태관리 라이브러리이다. redux를 활용하여 react에서 컴포넌트를 거치치 않고도 손쉽게 상태 값을 전달/공유 할 수 있다.
1. rudux 사용
(1) 모듈 설치
⏩ react앱 생성 전
npx create-react-app my-app --template redux
⏩ react앱 생성 후
npm add redux
2. redux내부 4가지 함수
(1) getState()
data를 저장할 수 있다.
console.log(countStore.getState())
(2) dispatch()
dispatch를 통해 action을 보낼 수 있다.
- useReducer와 사용이 비슷해보인다.
(3) subscribe()
변화를 감지한다.
- onChange의 변화를 감지한다.
3. React redux
(1) Store
application의 상태를 저장하며 일반적으로 한 application에 하나의 store를 생성한다.
- getState()를 통해 상태에 접근하게한다.
- dispatch(action)를 통해 상태를 수정할 수 있게 한다.
- subscribe(listener)를 통해 리스너를 등록한다.
(2) Provider
Provider로 최상위 컴포넌트를 감싸, 모든 하위 컴포넌트에서 store로 접근할 수 있게 해준다.
(3) Reducer
state와 action을 전달받아 action을 참고하여 새로운 state를 만들어서 반환하는 역할을 한다. 즉 state에 변화를 주는 "method" 역할을 reducer가 수행한다.
(4) action
state에 변화가 필요할 때, 특정 행위를 발생시키는 객체이다.
- type 필드를 필수적으로 가지고 있다.
- 그 외의 state는 자유롭게 넣어줄 수 있다.
⭐ action을 각각 관리
⭐ action을 통합하여 관리
action들을 actionCreators에 객체로 통합하여 관리한다. 이렇게 하면 컴포넌트에서 사용시 import를 actionCreators만 해주면 된다.
(5) mapStateToProps
store의 state를 component의 props로 전달해준다. 그러므로 store의 state를 component에서 사용할 수 있다.
- reducer의 state값을 state변수로 반환하고, component에서는 props로 받는다.
- reducer의 state값을 toDos 객체로 반환하고, component에서는 {toDos} 객체로 받는다.
(6) mapDispatchToProps
store의 dispatch를 받아와서 action을 전달해줄 수 있다.
💯 mapDispatchToPros의 반환값에 따른 dispatch 형태
dispatch란 리듀서에게 action을 발생하라고 시키는 것이라 이해하자. dispatch(action) 이렇게 action을 인자로 넘긴다.
⭐ action을 객체로 바로 작성
⭐ action을 스토어에 정의된 것을 import해서 작성
⭐ mapDispatchToProps에서 미리 정의
(7) ownProps 속성
ownProps는 mapDispatchToProps와 mapStateToProps에서 두 번째 매개변수로 사용되는 객체이다. 이는 두 함수가 정의된 파일의 컨테이너 컴포넌트에 전달된 모든 Props를 나타낸다.
💯 컨테이너 컴포넌트 : 아래 사진의 함수들이 function Home()에서 사용된다면, Home 컴포넌트가 이에 해당한다.
⏩ ToDo(하위) 컴포넌트
⏩ Home(상위) 컴포넌트-case1
- <ToDo / 부분에 집중
⏩ Home(상위) 컴포넌트-case2
- <ToDo / 부분에 집중
