Redux
1. 상태 정의
-
로컬 상태 : 각각의 컴포넌트 안에서 관리하는 상태 ex) input value, modal toggle
-
크로스 컴포넌트 상태 : props로 다수의 컴포넌트 간에 영향을 미치는 상태 ex) props drilling이 발생할 수 있다.
-
앱 와이드 상태 : 앱 전체에 걸쳐 영향을 미치는 상태 ex) 유저 인증
redux는 크로스 컴포넌트 상태와 앱 와이드 상태를 위한 상태 관리 라이브러리이다.
2.Context Api 대신 Redux를 쓰는 이유?
- 각 상태를 하나의 context.provider로 쓰는데, 관리하는 상태가 많아지면 하나의 provider에서 많은 작업을 하게 되기 때문에 복잡해진다.
- context api -> 상태를 구독하는 컴포넌트 하위 자식 컴포넌트 전부 재렌더링된다.
- redux -> 상태를 구독하는 컴포넌트만 재렌더링된다
3. 사용 방법 (react에서)
npm install redux react-redux @reduxjs/toolkit
3-1. 폴더 구조
3-2. Provider, store 설정
- 최상단 컴포넌트를 Provider로 감싸준다.
- rootReducer를 넣어 store를 생성한다.
3-3. reducer 생성
-
combinReducers로 여러 리듀서들을 합친 rootReducer를 만든다.
(store/index.js)
-
reducer와 action을 반환하는 액션생성함수를 만든다.
(store/module/reducer.js)
3-4. useSelector, useDispatch 사용
- useSelector는 함수를 인자로 받아 이전 state를 가져온 후 return 하는 값을 반환한다.
- useDispatch는 action을 전달하는 dispatch 함수를 반환한다.
