1. Redux
Redux는 상태 업데이트와 관련된 로직을 효율적으로 관리하는 라이브러리
- 여러 개의 컴포넌트에서 같은 상태를 공유할 때도 손쉽게 상태를 변경하고 관리할 수 있습니다. 프로젝트의 규모가 커지면 서로 다른 컴포넌트를 오가며 props와 state를 관리하는 것이 복잡해지기 때문에 외부에 store를 두고 관리하는 방식
- React는 자체적으로 state(와 props)를 관리할 수 있지만 컴포넌트가 많아지고 깊어지면 state의 값을 관리하기가 무거워지기 때문에 state의 관리의 편의성을 목적으로 사용하게된다.
2. Redux의 세 가지 원칙
- Single source of truth 단일스토어
동일한 데이터는 항상 같은 곳에서 가지고 와야 한다는 의미. 즉, Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음과 연결이 되는 원칙.
- State is read-only 읽기 전용 상태
상태는 읽기 전용이라는 뜻, React에서 상태갱신함수로만 상태를 변경할 수 있었던 것처럼, Redux의 상태도 직접 변경할 수 없음을 의미. 즉, Action 객체가 있어야만 상태를 변경할 수 있음과 연결되는 원칙.
- Changes are made with pure functions 순수한 함수 리듀서
변경은 순수함수로만 가능하다는 뜻, 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야하는 Reducer와 연결되는 원칙.
3. React의 상태관리 순서
Action->Dispatch->Reducer->Store
1) 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action객체가 생성됨.
2) 이 Action객체는 Dispatch함수의 인자로 전달됨
3) Dispatch함수는 Action객체를 Reducer함수로 전달
4) Reducer함수는 Action객체의 값을 확인하고, 그 값에 따라 전역상태 저장소 Store의 상태를 변경
5) 상태가 변경되면 React는 화면을 다시 렌더링
- Action
어떤 액션을 취할 것인지(어떤 동작을 하는지 명시) 정의해놓은 객체.
type은 필수로 지정해주어야 하고,Snake Case로 작성
보통은 Action 객체를 생성하는 함수를 만들어 사용(액션생성자(Action Creater)) - Dispatch
Reducer로 Action을 전달해주는 함수
Dispatch의 전달인자로 Action의 객체가 전달되고, 전달 Dispatch 함수는 Reducer를 호출 - Reducer
Dispatch에게서 전달받은 Action 객체의type값에 따라 상태를 변경시키는 함수
외부요인으로 인해 엉뚱한 값으로 상태가 변경되면 안되기 때문에순수함수여야만 함
(여러개의 Reducer를 사용하는 경우combineReducers메서드를 사용해서 하나의 Reducer로 합쳐줄수 있다.) - Store
상태가 관리되는 오직 하나 뿐인 저장소의 역할
Redux앱의 state가 저장되어 있는 공간
createStore메서드를 활용해 Reducer를 연결해 Store를 생성
import{ createStore } from 'redux';
const store = createStore(rootReducer);4.Redux Hooks
useSelector(), useDispatch()
useSelector()
컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게해주는 메서드
useDispatch()
Action객체를 Reducer로 전달해주는 메서드
