1. 상태 관리란?
상태가 시간이 지남에 따라 변할 수 있는 특정 시점의 데이터를 의미한다. 그러므로 상태 관리는 데이터와 상태의 흐름을 효율적으로 추적하고 유지하는 것을 의미한다!
2. 상태 관리의 유형
전역 상태 관리 vs 로컬 상태 관리
#전역 상태 관리
프로젝트 전체에 영향을 미치는 상태를 관리하는 것!
Redux, context-api, MobX, Recoil, Zustand, Jotai 같은 라이브러리들은 모두 전역 상태 관리에 도움을 주는 라이브러리다.
#로컬 상태 관리
특정 기능 또는 컴포넌트 내에서만 사용되는 상태를 관리하는 것을 의미한다.
useState를 비롯한 각종 hook을 이용해서 할 수 있다.
클라이언트 상태 관리 vs 서버 상태
상태 관리의 대상이 누구냐에 따라 상태 관리를 분류할 수도 있다!
클라이언트 상태 관리는 주로 프론트엔드-유저 간의 상호작용 상황에서, 서버 상태 관리는 프론트엔드-백엔드의 상호작용 상황에서 전개된다.
👉 Redux는 클라우드와 서버 상태 관리, 전역과 로컬 상태관리에서 모두 사용 가능!
단 로컬 상태관리에는 hook을 사용하는 것이 더 효율적이기도 하다,,
3. Redux의 세 가지 원칙
redux는 flux architecture의 정신을 구현한 것.
Action → Dispatcher → Store → View의 순서로 데이터 흐름을 단방향으로 제어하기 위한 아키텍처다!
(1) Single Source of Truth
진실은 언제나 하나. Redux는 모든 상태를 store에 저장하고, store가 바로 단 하나의 진실의 원천이 된다.
(2) State is Read-Only
사전에 미리 정의된 상황과 규칙에 어긋나는 경우, 외부에서는 상태값을 읽을 수는 있으나 임의로 변경할 수 없다.
(3) Changes are Made with Pure Functions
Reducer는 입력값을 변경하지 않으며, 같은 입력값에 대해서 항상 같은 출력값을 리턴하는 '순수 함수'가 되어야 한다.
4. Redux의 구성 요소
(1) Store
Redux의 데이터들을 저장하기 위한 저장소. 여기서 상태를 직접 수정할 수 없고, 오직 액션을 통해서만 변경할 수 있다!
(2) State
Redux Store에 저장되어 있는 데이터. 불변성을 유지하며, reducer에 의해서만 변경될 수 있다.
(3) Action
javaScript 객체 형태를 가지며, Redux Store에 저장된 데이터에 변화를 주기 위한 행동!
반드시 type 필드를 가져야 하며, 추가적인 데이터는 보통 payload 필드에 담는다.
(4) Action Creator
Action 객체를 생성하는 역할을 하는 javaScript 함수. 액션 생성을 추상화하고 재사용성을 높이기 위해 사용된다.
(5) Reducer
Action이 발생하면, Action을 실제로 처리하는 역할을 하는 함수다. Redux State의 변화를 만들어주는 함수.
❗️ Reducer의 불변적 업데이트: 현재의 상태를 변경하지 않고, 새로운 상태를 만들어 업데이트하라는 원칙!
// Case 1
function sampleReducer(state, action) {
switch (action.type) {
case "SAMPLE_ACTION":
state.value = action.value;
return state;
default:
return state;
}
}
// Case 2
function sampleReducer(state, action) {
switch (action.type) {
case "SAMPLE_ACTION":
return {
...state,
value: action.value
};
default:
return state;
}
}첫번째 코드는 state.value에 새로운 값을 대입하며 현존하는 state값을 변경.
두번째 값은 state값을 변경하지 않고, 새로운 state를 만듦. 불변적 업데이트는 case2!!
5. Redux-toolkit
효율적인 Redux 개발을 위한 공식 도구 모음!
Redux를 사용하는 과정이 너무 복잡하고,
Redux를 제대로 사용하려면 설치해야 할 패키지가 너무 많고,
Redux는 기본적으로 작성해야 할 비슷한 코드의 양이 너무 많다는 문제를 해결하기 위해
Redux Toolkit이 고안되었다~~
Slice
👉 Redux 구성 요소들의 조각!
여기서 Redux 구성 요소들에는 Action Type, Action Creator, 그리고 Reducer 등이 포함된다. 그리고 이러한 구성 요소들을 조각으로 분리해 놓은 것을 Redux Toolkit에서는 Slice 라고 부르는 것!
Redux Toolkit 주요 API
👇
configureStore()
createAction()
createReducer()
createSlice()
current()
각오
해커톤 하면서 상태관리하는 것이 가장 어려웠는데, Redux라는 신세계가 있었다니,, 더 일찍 알았더라면 좋았겠지만.. 이제라도 잘 활용해봐야겠다!!
