[Redux] 상태관리 라이브러리 Redux

리덕스란?

Redux란 상태 관리 라이브러리(선택사항)로 State, Props 상태를 여러 컴포넌트와 공유할 때 쓴다.
앱이 커지면 관리 힘들어지고 소스코드 지저분해지는데 이름 방지하고 효율적인 관리를 위해 Redux를 사용하는 것.

 

Redux Flow 설명

• Redux는 애플리케이션의 상태(state)를 예측 가능하게 관리하기 위해 단방향 데이터 흐름을 따른다.

 

1. Action 객체 (Action)

• 상태를 변화시키기 위해 발생시키는 의미 있는 이벤트
• JS 객체 형태로, 보통 type 속성이 필수
• 예시:

const incrementAction = { type: 'INCREMENT' };

 

2. Dispatch 함수

• Action을 스토어(Store)로 보내는 함수
• store.dispatch(action) 형태로 사용하며, 액션이 "발사"되는 순간이다.
• 예시:

store.dispatch(incrementAction);

 

3. Reducer 함수

• 순수 함수(pure function)로, 현재 상태와 액션을 받아서 새 상태를 반환한다.
• 조건문이나 switch로 action.type에 따라 상태를 업데이트한다.
• 예시:

function counterReducer(state = 0, action) {
  switch(action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

 

4. Redux Store

• 애플리케이션의 단일 상태 저장소
• Reducer가 반환한 새 상태를 저장하고, 상태가 바뀌면 구독(subscribe)된 컴포넌트나 함수가 리렌더링된다.
• 예시:

const store = Redux.createStore(counterReducer);

store.subscribe(() => console.log(store.getState()));

---

정리된 Flow

1. Action 발생 → 사용자가 버튼 클릭 등으로 액션 객체 생성
2. Dispatch → 액션을 스토어에 전달
3. Reducer 실행 → 현재 상태와 액션을 받아 새 상태 반환
4. Store 상태 업데이트 → 구독된 컴포넌트 자동 리렌더링

Action 객체
     ↓ dispatch
  Reducer 함수 (현재 state + action → 새로운 state)
     ↓
  Redux Store (state 저장)
     ↓
  React 컴포넌트 리렌더링

 

 

---

 

💡 핵심 포인트

• Redux는 단방향 흐름을 갖기 때문에, 상태 변경의 흐름이 예측 가능하다.
• Reducer는 순수 함수여야 하며, 직접 상태를 바꾸지 않고 항상 새로운 상태를 반환한다.
• React와 함께 쓰면, Store의 상태가 바뀔 때 필요한 컴포넌트만 리렌더링된다.

---

slice란 무엇인가?

slice는 상태(state)와 관련 로직을 작은 단위로 나누어 관리하는 역할을 한다. Redux Toolkit(RTK)에서 주로 사용되며, 전통적인 Redux보다 훨씬 간단하게 상태, 액션, 리듀서를 정의할 수 있게 도와준다. 즉, slice는 Redux 상태 관리의 작은 모듈이라 볼 수 있고, “작은 조각 단위로 상태 + 액션 + 리듀서를 관리”하게 해주는 도구

 

1. 상태(State) 관리 단위

• slice 하나가 앱 상태의 일부 영역을 담당한다.
• 예를 들어, 사용자 정보, 장바구니, 게시글 목록 등 각각을 slice로 나눌 수 있다.

const initialState = { count: 0 };

const counterSlice = createSlice({
  name: 'counter',  // slice 이름
  initialState,
  reducers: {
    increment: (state) => {
      state.count += 1;  // Immer 덕분에 불변성을 신경 안 써도 됨
    },
    decrement: (state) => {
      state.count -= 1;
    }
  }
});

 

2. 액션(Action) 자동 생성

• slice를 만들면 reducers 안의 함수 이름을 기반으로 액션 생성자가 자동으로 만들어진다.

const { increment, decrement } = counterSlice.actions;

dispatch(increment()); // 액션 디스패치

 

3. 리듀서(Reducer) 제공

• slice는 해당 상태를 변경하는 리듀서를 자동으로 만들어준다.
• 이 리듀서를 store에 넣어 사용한다.

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

 

4. 장점 요약

• 상태, 액션, 리듀서를 한 곳에서 관리
• 보일러플레이트(코드 반복) 최소화
• 불변성을 신경 쓰지 않고 상태 변경 가능
• 여러 slice를 조합해 전체 앱 상태 관리 가능

---

여러 Slice 합치기

 

• 여러 slice를 하나의 리듀서로 합쳐야 할 때 combineReducers 사용
• 최종적으로 configureStore 또는 createStore에 전달되는 “전체 앱 리듀서”를 만드는 단계에서 한다.

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import counterSlice from './counterSlice';
import userSlice from './userSlice';

// 여러 slice 합치기
const rootReducer = combineReducers({
  counter: counterSlice.reducer,
  user: userSlice.reducer
});

// Store 생성
const store = configureStore({
  reducer: rootReducer
});

 

 

• 여기서 rootReducer가 store 단계에서 전체 상태를 관리하는 역할을 한다.
• React 컴포넌트가 dispatch를 날리면, store가 rootReducer로 액션 전달 → 해당 slice reducer에서 처리 → 상태 업데이트 → 리렌더링 순서로 흐른다.

---

Redux 플로우

[React Component]
        |
        | dispatch(action)
        v
   +----------------+
   |   Slice 액션    |
   +----------------+
        |
        v
   +----------------+
   |   Slice Reducer |
   +----------------+
        |
        v
   +-------------------------+
   | combineReducers (root)  |
   | - 여러 slice 리듀서 합침 |
   +-------------------------+
        |
        v
   +----------------+
   |   Redux Store   |
   | (전체 state)    |
   +----------------+
        |
        v
[React Component re-render]

 

 

• React Component
  • 버튼 클릭, 입력 이벤트 등에서 dispatch() 호출 → 액션 생성
• Slice 액션(Action)
  • createSlice에서 정의한 액션이 자동으로 생성됨
  • 예: increment(), setUser()
• Slice Reducer
  • 액션에 따라 slice 단위로 상태 변경
• combineReducers (rootReducer)
  • 여러 slice의 reducer를 하나로 합쳐 전체 상태 구조를 만듦
  • 예: { counter: counterSlice.reducer, user: userSlice.reducer }
• Redux Store
  • 최종 상태 저장소
  • 상태 변경 시 React 컴포넌트 리렌더링