1. React-Redux란?
- React-Redux는 React용 공식 Redux UI 바인딩 라이브러리
- 가장 많이 사용하는 상태 관리 라이브러리로 컴포넌트끼리 상태를 공유해야 할 때 여러 컴포넌트를 거치지 않고 쉽게 상태값을 전달하거나 업데이트할 수 있음
2. React-Redux를 사용해야 하는 이유
(1) 전역 상태 관리
- 기존 리액트에서는 여러 컴포넌트에 걸쳐 있는 상태를 변화시키거나 기준이 되는 컴포넌트와 멀리 떨어진 컴포넌트 간의 데이터를 주고 받기 어려웠음
- React-Redux 는 이런 문제를 해결하기 위해 중앙에서 Store를 통해 전역으로 상태를 관리해 여러 컴포넌트를 거치지 않고 바로 상태 값을 받을 수 있음
(2) props drilling
- 하위 컴포넌트가 깊어지고 전달하는 컴포넌트가 많아질 수록 props를 추적하거나 유지보수 하기 어려워짐
- React-Redux는 props drilling을 막고 멀리 떨어진 컴포넌트도 중앙 데이터 저장소 store에 직접 전달할 수 있음
3. Redux와 React-Redux API
🌻 Redux API
createStore
: store 생성
combineReducer
: 여러 개의 slice를 결합하여 하나의 root reducer 를 만든다.
🌻 React-Redux API
Provider
- react app 전체에 제공할 store를 주입하는 컴포넌트
useSelector
- store의 state에 접근하는 hook 입니다. useState의 state 처럼 활용
useDispatch
- action을 reducer로 보내는 역할입니다. useState의 setState 처럼 씀