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

thinktank911 2025. 11. 17. 12:58

리덕스란?

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

Action 발생 → 사용자가 버튼 클릭 등으로 액션 객체 생성
Dispatch → 액션을 스토어에 전달
Reducer 실행 → 현재 상태와 액션을 받아 새 상태 반환
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 컴포넌트 리렌더링