[TIL-0512] Zustand vs. Redux

🌟 상태 관리 라이브러리 비교 : Zustand vs. Redux

리액트 애플리케이션이 점점 커지면서 상태 관리(State Management)는 필수가 되었다.
대표적인 두 라이브러리 Zustand과 Redux는 같은 목적을 지니지만 사용성, 철학, 규모 면에서 매우 다르다.
이 글에서는 두 라이브러리를 깊이 있게 비교하고, 각각의 장단점과 사용 적합 상황을 소개할 것이다.

---

🌟 Zustand란?

Zustand는 독일어로 상태(state)라는 뜻으로, 가볍고 직관적인 상태 관리 라이브러리이다.

• 특징

  • 간단한 API : 몇 줄의 코드로 store를 만들고 사용할 수 있음
  • Boilerplate 없음 : 액션 타입, 리듀서 등 불필요한 코드가 없음
  • React Context 미사용 : 자체 구독 시스템으로 성능 최적화
  • 서브스크립션 기반 : 필요한 컴포넌트만 리렌더링됨
  • Immer, persist 등 미들웨어 제공
  • 타입스크립트와 뛰어난 궁합

• 예제

  • store.ts

    import { create } from 'zustand';
    
    const useCounterStore = create((set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
    }));

    • 전역 상태를 생성하고 상태 조작 함수(increase)를 정의함
    • Zustand의 create 함수를 사용해 간단히 전역 store를 만들 수 있음
    • count : 현재 카운터 상태
    • increase : 상태를 업데이트하는 함수 (set 사용)
    • useCounterStore : 컴포넌트에서 상태를 가져오는 커스텀 훅

  • Component.tsx

    const Counter = () => {
      const { count, increase } = useCounterStore();
      return (
        <div>
          <p>{count}</p>
          <button onClick={increase}>+1</button>
        </div>
      );
    };

    • useCounterStore를 사용해 count 값을 읽고 increase()로 상태를 업데이트함
    • Zustand는 use___Store() 훅을 통해 직접 상태를 가져와 사용할 수 있음
    • count : 상태 값 가져오기
    • increase : 버튼 클릭 시 상태 변경

---

🌟 Redux란?

Redux는 페이스북의 Flux 아키텍처에서 영감을 받아 만든 상태 관리 라이브러리로, 예측 가능한 상태 관리(Predictable State Container)를 모토로 한다.

• 특징

  • 단방향 데이터 흐름 기반
  • 액션 → 리듀서 → 상태 업데이트 패턴
  • 미들웨어 중심 확장성 (e.g. redux-thunk, redux-saga)
  • Redux DevTools 지원: 디버깅 편리
  • Context API를 활용한 상태 전달
  • 대규모 프로젝트에 적합

• 예제

  • actions.ts

    export const increase = () => ({ type: 'INCREASE' })

    • 상태를 변경하기 위한 액션 생성 함수(Action Creator)
    • 액션 객체 { type: 'INCREASE' }를 반환함
    • 컴포넌트에서 dispatch(increase())로 호출함

  • reducer.ts

    const initialState = { count: 0 };
    export const counterReducer = (state = initialState, action) => {
      switch (action.type) {
        case 'INCREASE':
          return { ...state, count: state.count + 1 }
        default:
          return state
      }
    };

    • 상태 변경 로직을 담당하는 리듀서 함수
    • 초기 상태: count = 0
    • 액션의 type에 따라 상태를 변경함
    • 새로운 상태 객체를 반환해야 하므로 불변성 유지 필수

  • store.ts

    import { createStore } from 'redux'
    export const store = createStore(counterReducer);

    • Redux의 전역 상태 저장소(Store)를 생성함
    • createStore에 리듀서를 넘겨 store를 생성함
    • React 앱 최상단에 Provider로 이 store를 주입해야 함

  • Component.tsx

    const Counter = () => {
      const count = useSelector((state) => state.count);
      const dispatch = useDispatch();
      
      return (
        <div>
          <p>{count}</p>
          <button onClick={() => dispatch(increase())}>+1</button>
        </div>
      )
    }

    • Redux의 상태를 읽고(useSelector) 변경(dispatch)하는 UI 컴포넌트
    • useSelector : store에서 count 값을 가져옴
    • useDispatch : 액션을 디스패치해서 상태를 변경함

---

🌟 표로 비교하기 - Zustand vs. Redux

항목	Zustand	Redux
상태 정의 위치	store.ts 한 곳에서 모두 정의	actions, reducers, store로 분리
상태 업데이트	set() 함수 사용	dispatch() + reducer
구조	단순하고 직관적	명확하지만 구조가 복잡함
러닝 커브	낮음	중간~높음
컴포넌트 코드	간결함	약간 장황함(액션, dispatch 필요)
디버깅 지원	기본 지원 + Devtools (middleware)	매우 강력한 Redux DevTools 지원
미들웨어	간단히 추가 가능 (persist 등)	풍부하고 유연 (thunk, saga 등)
타입스크립트 지원	매우 우수	기본은 수동 설정 필요, RTK 사용 시 개선
성능 최적화	자체 subscribe로 자동 최적화	useSelector 최적화 필요
마이크로 상태 구독	지원 (필요한 값만 구독)	가능하나 복잡 (memoization 필요)
SSR 지원	기본 지원	별도 처리 필요

---

🌟 Zustand가 적합한 상황

• 빠르게 개발해야 할 프로젝트

• 비교적 규모가 작은 애플리케이션

• 상태 로직이 복잡하지 않거나 단순 UI 제어

• 보일러플레이트 없이 직관적인 코드 지향

• 모듈 단위 상태 관리가 필요한 경우

  🔍 모듈 단위 상태 관리란?

  • 기능별로 상태(store)를 쪼개서 관리하는 방식
  • 각 독립적인 기능이나 UI 영역마다 자기만의 상태 저장소를 가지도록 모듈화하는 것

  🔍 예시로 이해해보기

  • 전역 상태를 하나의 store에 다 넣은 경우 (비추천)

    const useGlobalStore = create((set) => ({
      modalOpen: false,
      loginUser: null,
      cartItems: [],
      theme: 'light',
      // ...
    }));

    • 상태가 많아질수록 관리가 복잡해짐
    • 하나만 바뀌어도 관련 없는 컴포넌트가 리렌더링될 위험 있음
  • 기능별로 store를 나눈 경우 (모듈 단위 관리)

    // modal.store.ts
    export const useModalStore = create((set) => ({
      isOpen: false,
      open: () => set({ isOpen: true }),
      close: () => set({ isOpen: false }),
    }));

    // auth.store.ts
    export const useAuthStore = create((set) => ({
      user: null,
      login: (user) => set({ user }),
      logout: () => set({ user: null }),
    }));

    // cart.store.ts
    export const userCartStore = create((set) => ({
      items: [],
      addItem: (item) => set((state) => ({ items: [...state.items, item] })),
    }));

    • 모달 기능은 modal store, 로그인은 auth store, 장바구니는 cart store
    • 각 기능별로 store를 나누면 관심사의 분리가 잘 되고, 유지보수도 쉬워지고, 리렌더링도 최소화됨

• 예시

  • 사이드바 열기/닫기
  • 사용자 로그인 상태
  • 모달 열기/닫기
  • 필터링 조건 관리

---

🌟 Redux가 적합한 상황

• 프로젝트가 중~대규모이며 팀 작업이 필요한 경우

• 명확한 상태 흐름 관리가 중요한 경우

• 복잡한 비동기 로직이 많거나 상태 간 의존성이 큰 경우

• 디버깅, 액션 추적이 중요한 엔터프라이즈 환경

• 상태 변경을 예측 가능하게 추적하고 싶은 경우

• 예시

  • 쇼핑몰 주문/결제 상태 흐름

    ✅ 상황 설명

    쇼핑몰에서는 상품을 장바구니에 담고 → 주문서를 작성하고 → 결제를 진행하고 → 결제 완료까지 여러 단계를 거침

    ✅ 상태 예시

    {
      cart: [...],
      order: {
        deliveryInfo: { name, address, phone },
        paymentMethod: '카드',
        orderStatus: '결제 대기' | '결제 완료' | '배송 중' | '배송 완료',
      },
      ui: {
        step: 2, // 주문서 작성 단계
      }
    }

    ✅ 이유

    • 여러 단계가 직렬화된 상태 흐름을 가지므로 상태 변경을 추적하고 롤백하기에 좋음
    • 결제 실패 시 이전 상태로 복구 가능해야 함
    • Redux DevTools로 상태 추적 및 디버깅 용이
    • Redux Saga 등으로 비동기 결제 처리 로직 쉽게 구성 가능

  • 인증 토큰 + 리프레시 로직

    ✅ 상황 설명

    로그인 후에는 access token과 refresh token을 관리해야 하며, access token이 만료되면 refresh token으로 자동 재발급해야 함

    ✅ 상태 예시

    {
      auth: {
        accessToken: '...',
        refreshToken: '...',
        isAuthenticated: true,
        user: { id, email, role },
      }
    }

    ✅ 이유

    • 토큰 갱신은 비동기 처리와 타이밍 관리가 중요함
    • axios interceptors나 Redux middleware를 통해 요청 전 토큰 유효성 검사
    • isAuthenticated 여부에 따라 라우팅 제어
    • Redux는 복잡한 비동기 흐름과 상태 공유에 강함

  • 챗봇 대화 상태 추적

    ✅ 상황 설명

    사용자와 챗봇의 대화 내역을 저장하고, 현재 대화 상태(답변 중, 완료 등)를 관리해야 함

    ✅ 상태 예시

    {
      chat: {
        messages: [
          { id: 1, sender: 'user', text: '안녕' },
          { id: 2, sender: 'bot', text: '안녕하세요!' },
        ],
        status: '답변 중' | '완료'
      }
    }

    ✅ 이유

    • 상태가 시간 순서대로 쌓이며, 불변성 유지가 중요
    • 다양한 모듈(입력창, 메시지 리스트, 로딩 애니메이션)이 상태에 반응해야 함
    • 비동기 응답 대기 시 로딩 처리 등 복잡한 로직 필요
    • 예: Redux Thunk로 async 메시지 전송 처리 → 메시지 도착 시 상태 갱신

  • 데이터 흐름이 명확히 정의돼야 하는 SaaS 시스템

    ✅ 상황 설명

    SaaS(Software as a Service)의 예로는 고객 관리 CRM, 프로젝트 관리툴 등이 있으며, 이러한 시스템에서는 여러 사용자, 팀, 권한, 데이터가 서로 연결되어 있음

    ✅ 상태 예시

    {
      user: { id, role, permissions },
      teams: [{ id, name, members: [...] }],
      currentProject: { id, tasks: [...], status: '진행 중' },
      ui: { selectedTab: 'dashboard' }
    }

    ✅ 이유

    • 데이터 구조가 복잡하고 계층적임
    • 역할/권한별 기능이 달라지므로 상태에 따라 UI 변화 발생함
    • 동기화 이슈 발생 시 정확한 상태 스냅샷 추적이 필요함
    • 여러 모듈이 하나의 상태를 공유하므로 Redux의 전역 상태 통합 관리가 효율적임

---

🌟 Redux Toolkit(RTK) 도입 시의 변화

Redux는 Redux Toolkit을 통해 많은 단점을 개선하고 있음

• createSlice, configureStore로 보일러플레이트 감소
• Immer 기반 불변성 자동 처리
• TypeScript 지원 강화
• createAsyncThunk로 비동기 로직 단순화

const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment: (state) => { state.count += 1 },
  }
})

Redux를 사용할 경우 무조건 RTK로 시작하는 것이 권장됨

---

🌟 Redux Toolkit이란?

Redux Toolkit은 Redux의 공식 툴킷으로, Redux를 더 간단하고 효율적으로 사용하도록 도와주는 라이브러리이다.
Redux의 불편한 점들을 대폭 개선해주며, 사실상 현대 Redux의 표준 방식으로 자리잡고 있다.

• 기존 Redux의 단점
  • 액션 타입 정의, 액션 생성자, 리듀서 따로 작성 → 보일러 플레이트 많음
  • 불변성 유지 직접 처리해야 함
  • 복잡한 설정 → 진입 장벽 높음
  ➡️ 이런 문제를 해결하기 위해 등장한 것이 바로 RTK

• 핵심 기능 요약

  기능	설명
  configureStore	store를 쉽게 설정 + 미들웨어 자동 포함
  createSlice	리듀서 + 액션 생성자 자동 생성
  createAsyncThunk	비동기 로직 작성 간편화
  createReducer	switch문 없이 리듀서 작성 가능
  createAction	액션 생성자 단독 생성 (필요한 경우)
  RTK Query	API 상태 관리까지 자동 처리하는 고급 기능

---

🌟 Redux Toolkit 예제

• 기본 구조 예제

  • counterSlice.ts : Redux state + reducer + action 생성자를 한 파일에서 통합 정의하는 곳

    import { createSlice } from '@reduxjs/toolkit';
    
    const counterSlice = createSlice({
      name: 'counter',
      initialState: { count: 0 },
      reducers: {
        increment: (state) => {
          state.count += 1; // Immer 사용 → 불변성 걱정 X
        },
        decrement: (state) => {
          state.count -= 1;
        },
      },
    });
    
    export const { increment, decrement } = counterSlice.actions;
    export default counterSlice.reducer;

    • Redux에서 필요한 액션/리듀서를 별도 작성할 필요 없음
    • 상태 관리 로직이 하나의 기능 단위로 잘 묶임

    구성 요소	설명
    createSlice	state, reducer, action을 한 번에 정의하는 Redux Toolkit의 핵심 기능
    name	slice의 이름. 액션 타입(counter/increment) 등에 사용됨
    initialState	초기 상태값
    reducers	액션이 발생했을 때 상태를 어떻게 업데이트할지를 정의함
    state.count += 1	원래 Redux에서는 불변성 때문에 스프레드 연산자를 써야 했지만, RTK는 Immer를 내장해 있어 직접 수정 가능
    counterSlice.actions	자동 생성된 액션 생성자들(increment, decrement)
    counterSlice.reducer	slice에서 정의된 리듀서 함수만 export (store에서 사용)

  • store.ts : Redux 중앙 저장소를 생성하고 구성하는 곳

    import { configureStore } from '@reduxjs/toolkit';
    import counterReducer from './counterSlice';
    
    const store = configureStore({
      reducer: {
        counter: counterReducer,
      },
    });
    
    export default store;

    • 모든 slice들이 하나로 통합되어 앱 전체에서 상태 공유 가능
    • DevTools와 미들웨어(thunk 등) 자동 적용됨

    구성 요소	설명
    configureStore	Redux Toolkit에서 store를 생성하는 함수. createStore보다 설정이 간편함
    reducer: { counter: counterReducer }	여러 slice 리듀서를 하나로 통합하는 역할 (여기선 하나뿐이지만 확장 가능)
    counter 키 이름	state.counter로 접근 가능하게 되는 부분
    미들웨어 자동 포함	Redux DevTools, thunk 등 기본 미들웨어가 자동으로 설정됨

  • Counter.tsx : 상태를 실제로 사용하고 화면에 보여주는 UI 컴포넌트

    import { useSelector, useDispatch } from 'react-redux';
    import { increment } from './counterSlice';
    
    const Counter = () => {
      const count = useSelector((state: any) => state.counter.count);
      const dispatch = useDispatch();
      
      return (
        <div>
          <p>{count}</p>
          <button onClick={() => dispatch(increment())}>+1</button>
        </div>
      );
    };

    • 사용자는 버튼 클릭으로 count 상태를 변경 가능함
    • 상태에 따라 UI가 자동으로 리렌더링됨

    구성 요소	설명
    useSelector()	Redux의 store 상태를 조회함. state.counter.count에서 counter는 store에서 등록한 slice 이름
    useDispatch()	액션을 발생시켜 상태를 변경
    dispatch(increment())	counterSlice에서 자동 생성된 액션을 실행함 → 상태가 변경됨
    <p>{count}</p>	store의 상태를 UI에 반영

    💡 count와 increment()를 불러오는 방식이 서로 다른 이유

    • count는 상태 값(상태)
      counterSlice.ts에서 count라는 상태값을 정의한 것임

      // counterSlice.ts
      initialState: { count: 0 },

      그리고 이 리듀서를 store.ts에서 다음과 같이 등록함

      const store = configureStore({
        reducer: {
          counter: counterReducer,
        },
      });

      여기서 counter라는 키로 store에 등록했기 때문에, 전체 store의 구조는 다음과 같이 됨

      {
        counter: {
          count: 0
        }
      }

      👉 따라서 useSelector((state) => state.counter.count)라고 써야 state.counter(해당 slice) 안의 count 값을 가져올 수 있는 것!
    • increment()는 액션 생성자(액션)
      그래서 useSelector로 가져오는 게 아니라, 그냥 import 해서 dispatch()로 실행시키는 것

      import { increment } from './counterSlice' // 액션 생성자

      이걸 dispatch(increment())처럼 쓰는 게 Redux의 기본 방식임

• 비동기 로직 (createAsyncThunk)

  • userThunks.ts : 사용자 데이터를 서버에서 비동기적으로 가져오는 로직을 정의하는 파일

    import { createAsyncThunk } from '@reduxjs/toolkit'
    
    export const fetchUser = createAsyncThunk(
      'user/fetch',
      async (userId: string) => {
        const res = await fetch(`/api/users/${userId}`);
        return await res.json();
      };
    );

    구성 요소	설명
    'user/fetch'	액션 타입 접두사. 내부적으로 user/fetch/pending, user/fetch/fulfilled, user/fetch/rejected가 자동 생성됨
    async function	실제 API 요청 로직. userId를 받아서 fetch 요청하고, JSON으로 응답 반환
    반환값	fulfilled 상태에서 action.payload로 전달됨

    createAsyncThunk는 내부적으로 3가지 액션을 자동 생성함

    • fetchUser.pending
    • fetchUser.fulfilled
    • fetchUser.rejected

  • userSlice.ts : 사용자 관련 상태와 상태 변경 로직(Reducer)을 정의하는 Redux slice 파일

    import { createSlice } from '@reduxjs/toolkit'
    import { fetchUser } from './userThunks'
    
    const userSlice = createSlice({
      name: 'user',
      initialState: { user: null, status: 'idle' },
      reducers: {},
      extraReducers: (builder) => {
        .addCase(fetchUser.pending, (state) => {
          state.status = 'loading';
        })
        .addCase(fetchUser.fulfilled, (state, action) => {
          state.user = action.payload;
          state.status = 'succeeded';
        })
        .addCase(fetchUser.rejected, (state) => {
          state.status = 'failed';
        })
      },
    });
    
    export default userSlice.reducer

    구성 요소	설명
    initialState	user: 사용자 정보 저장 status: 요청 상태 관리(idle, loading, succeeded, failed)
    reducers: {}	동기 액션은 없으므로 비워둠
    extraReducers	비동기 액션에 대한 상태 변경 로직 정의 builder를 통해 각각의 액션 상태 처리

    🔍 extraReducers 내부 흐름

    액션 타입	설명	상태 변화
    fetchUser.pending	API 요청 시작 전	status = 'loading'
    fetchUser.fulfilled	요청 성공, 응답 도착	status = 'succeeded', 'user = 응답값'
    fetchUser.rejected	요청 실패	status = 'failed'

---

🌟 RTK가 가져다주는 장점

1. 불변성 자동 처리 (Immer 내장)

   • state.count += 1처럼 작성해도 내부적으로는 ...spread로 안전하게 처리됨

2. 코드 양 최소화

   • 액션/타입/리듀서가 하나의 slice로 통합

3. 기본 미들웨어 자동 포함

   • Redux DevTools
   • serializableCheck
   • thunk

4. 비동기 요청 간편화 (createAsyncThunk)

   • 서버 API 호출 흐름을 간단하게 다룰 수 있음

---

🌟 Redux Toolkit vs. 기존 Redux

항목	기존 Redux	Redux Toolkit
코드 길이	길고 복잡	짧고 간결
불변성 유지	직접 처리	Immer로 자동
비동기 처리	Thunk/Saga 설정 필요	createAsyncThunk 제공
DevTools 설정	수동	자동 포함
구조 설계	수작업으로 구성	createSlice로 자동화 가능

---

🌟 Redux Toolkit이 적합한 상황

• 여러 상태를 체계적으로 관리할 중~대규모 프로젝트

• 복잡한 비동기 처리(API 요청, 로딩 등)

• 팀 단위 협업 프로젝트

• Redux의 구조화된 패턴은 유지하되, 생산성을 높이고 싶은 경우

• 예시

  • 쇼핑몰 주문 처리 단계 (장바구니 → 결제 → 완료)

    ✅ 상황 설명

    사용자가 상품을 장바구니에 담고, 결제 페이지를 거쳐 주문 완료까지 진행하는 다단계 프로세스에서는 각 단계별 상태(현재 단계, 주문 항목 등)를 명확하게 관리해야 함

    ✅ 상태 예시

    import { createSlice } from '@reduxjs/toolkit'
     const orderSlice = createSlice({
       name: 'order',
       initialState: {
         step: 1,
         status: 'idle',
         items: [],
       },
       reducers: {
         nextStep: (state) => { state.step += 1 },
         addItem: (state, action) => { state.items.push(action.payload) },
         resetOrer: () => ({ step: 1, status: 'idle', items: [] }),
       },
     });
     export const { nextStep, addItem, resetOrder } = orderSlice.actions
     export default orderSlice.reducer

    ✅ 이유

    • 상태가 점진적으로 전환되며, 각 단계마다 상태 값이 변경됨
    • 상태 업데이트 로직이 명확하고, RTK의 createSlice로 한 파일에서 상태/액션/로직을 통합해서 관리할 수 있어 편리함
    • Immer가 내장되어 있어서 불변성 유지 걱정 없이 상태 변경 가능

  • 유저 정보 API 호출 (loading/success/fail 상태 추적)

    ✅ 상황 설명

    서버에서 데이터를 받아오는 비동기 API 요청은 요청 중(loading), 성공(fulfilled), 실패(rejected)의 여러 상태를 관리해야 함

    ✅ 상태 예시

    import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
     export const fetchUser = createAsyncThunk(
      'user/fetch',
      async (id) => {
        const res = await fetch(`/api/users/${id}`);
        return await res.json();
      }
    );
    const userSlice = createSlice({
      name: 'user',
      initialState: { user: null, status: 'idle' },
      reducers: {},
      extraReducers: (builder) => {
        builder
          .addCase(fetchUser.pending, (state) => { state.status = 'loading' })
          .addCase(fetchUser.fulfilled, (state, action) => {
          state.user = action.payload;
          state.status = 'succeeded';
        })
          .addCase(fetchUser.rejected, (state) => { state.status = 'failed' })
      },
    });
    export default userSlice.reducer

    ✅ 이유

    • createAsyncThunk를 사용하면 비동기 요청을 3단계 상태로 자동 분리해서 관리 가능
    • extraReducers에서 요청 흐름에 따라 상태를 구체적으로 나눠서 처리 가능
    • 비동기 로직과 UI 상태를 명확히 분리할 수 있음

  • 사용자 입력 폼 상태 처리 + 제출 처리

    ✅ 상황 설명

    • 입력창이 여러 개 있고 사용자가 폼을 입력하고 제출하는 기능은 상태를 컴포넌트에만 두기엔 너무 복잡해질 수 있음
    • 제출 여부, 에러 상태 등도 관리 대상이 됨

    ✅ 상태 예시

    import { createSlice } from '@reduxjs/toolkit'
     const formSlice = createSlice({
      name: 'form',
      initialState: {
        name: '',
        email: '',
        submitted: false,
      },
      reducers: {
        setName: (state, action) => { state.name = action.payload },
        setEmail: (state, action) => { state.email = action.payload },
        submitForm: (state) => { state.submitted = true }
      }
    })
    export const { setName, setEmail, submitForm } = formSlice.actions
    export default formSlice.reducer

    ✅ 이유

    • 상태를 중앙에서 관리함으로써 여러 컴포넌트에서 일관되게 폼 값을 공유 가능
    • RTK의 createSlice를 통해 입력값 설정(setName, setEmail)과 제출 상태 처리(submitForm)를 한 곳에서 관리 가능
    • 상태 변경이 간단한 로직일 때 RTK의 간결한 문법이 유리

  • UI 상태, 알림 상태 등 다양한 기능을 모듈 단위로 구분

    ✅ 상황 설명

    • 사용자 경험을 위한 UI 요소(모달, 테마, 알림 등)는 전역 상태로 여러 컴포넌트에서 공유되어야 함
    • 예를 들어, 모달은 어디서든 열고 닫을 수 있어야 함

    ✅ 상태 예시

    import { createSlice } from '@reduxjs/toolkit'
     const uiSlice = createSlice({
      name: 'ui',
      initialState: {
        isModalOpen: false,
        theme: 'light',
      },
      reducers: {
        toggleModal: (state) => { state.isModalOpen = !state.isModalOpen },
        setTheme: (state, action) => { state.theme = action.payload },
      },
    });
    export const { toggleModal, setTheme } = uiSlice.actions
    export default uiSlice.reducer

    ✅ 이유

    • 단순하고 반복적인 상태 로직을 createSlice로 간단히 작성 가능
    • RTK를 통해 전역 UI 상태도 불변성 걱정 없이 관리
    • UI 상태가 다양한 컴포넌트와 연결될 수 있어 중앙 집중식 관리가 편리

---

🌟 결론: 어떤 상태 관리 라이브러리를 선택할까?

상황	추천 라이브러리
빠른 개발, 단순 상태, 소규모 프로젝트	Zustand
팀 프로젝트, 구조화된 관리, 디버깅 중요	Redux (RTK)
복잡한 비동기 흐름과 고급 미들웨어 필요	Redux + Thunk/Saga
상태 구독 최적화, 모듈 단위 상태 분리 필요	Zustand