Redux + TypeScript 확장 개념 완전 이해하기

👣 먼저 준비하기 (공통 셋업)

1. 필요한 라이브러리 설치

npm install @reduxjs/toolkit react-redux redux-persist

2. Redux 스토어 만들기 (src/app/store.ts)

import { configureStore } from '@reduxjs/toolkit'
import todoReducer from '../features/todo/todoSlice'
import authReducer from '../features/auth/authSlice'
import themeReducer from '../features/theme/themeSlice'
import filterReducer from '../features/filter/filterSlice'

// Redux 스토어 생성 - 모든 slice를 하나로 합칩니다
export const store = configureStore({
  reducer: {
    todo: todoReducer,
    auth: authReducer,
    theme: themeReducer,
    filter: filterReducer,
  },
})

// 타입스크립트용 타입 정의
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

3. 커스텀 훅 추가 (src/app/hooks.ts)

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'

// 디스패치와 셀렉터를 타입 안전하게 사용하기 위한 커스텀 훅
export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

---

✅ 1. Todo 기능

📁 src/features/todo/todoSlice.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

// 할 일 하나의 타입 정의
export interface Todo {
  id: string
  title: string
  completed: boolean
  tags?: string[]
}

// 상태는 Todo 배열
const initialState: Todo[] = []

export const todoSlice = createSlice({
  name: 'todo',
  initialState,
  reducers: {
    addTodo: (state, action: PayloadAction<Todo>) => {
      state.push(action.payload) // 새로운 할 일을 추가
    },
    toggleComplete: (state, action: PayloadAction<string>) => {
      const todo = state.find(t => t.id === action.payload)
      if (todo) {
        todo.completed = !todo.completed
      }
    },
    deleteTodo: (state, action: PayloadAction<string>) => {
      return state.filter(t => t.id !== action.payload)
    },
  },
})

export const { addTodo, toggleComplete, deleteTodo } = todoSlice.actions
export default todoSlice.reducer

---

🔐 2. 유저 인증

📁 src/features/auth/authSlice.ts

import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit'

// 로그인 비동기 thunk
export const login = createAsyncThunk(
  'auth/login',
  async ({ id, pw }: { id: string; pw: string }) => {
    // 예제용: 로그인 성공 시 유저 정보와 토큰 반환
    return {
      user: id,
      token: 'token_example',
    }
  }
)

interface AuthState {
  user: string | null
  token: string | null
  loading: boolean
}

const initialState: AuthState = {
  user: null,
  token: null,
  loading: false,
}

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    logout: (state) => {
      state.user = null
      state.token = null
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(login.pending, (state) => {
        state.loading = true
      })
      .addCase(login.fulfilled, (state, action) => {
        state.user = action.payload.user
        state.token = action.payload.token
        state.loading = false
      })
      .addCase(login.rejected, (state) => {
        state.loading = false
      })
  },
})

export const { logout } = authSlice.actions
export default authSlice.reducer

---

🌙 3. 다크 모드

📁 src/features/theme/themeSlice.ts

import { createSlice } from '@reduxjs/toolkit'

interface ThemeState {
  mode: 'light' | 'dark'
}

const initialState: ThemeState = {
  mode: 'light',
}

const themeSlice = createSlice({
  name: 'theme',
  initialState,
  reducers: {
    toggleTheme: (state) => {
      state.mode = state.mode === 'light' ? 'dark' : 'light'
    },
  },
})

export const { toggleTheme } = themeSlice.actions
export default themeSlice.reducer

💡 적용 방법 (Tailwind 또는 클래스 변경)

const mode = useAppSelector(state => state.theme.mode)
useEffect(() => {
  document.body.className = mode
}, [mode])

---

🏷️ 4. 태그 필터링

📁 src/features/filter/filterSlice.ts

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface FilterState {
  tags: string[]
}

const initialState: FilterState = {
  tags: [],
}

const filterSlice = createSlice({
  name: 'filter',
  initialState,
  reducers: {
    setTags: (state, action: PayloadAction<string[]>) => {
      state.tags = action.payload
    },
  },
})

export const { setTags } = filterSlice.actions
export default filterSlice.reducer

💡 태그 기준으로 Todo 필터링

const todos = useAppSelector((state) => state.todo)
const filterTags = useAppSelector((state) => state.filter.tags)

const filteredTodos = todos.filter(todo =>
  filterTags.length === 0 || todo.tags?.some(tag => filterTags.includes(tag))
)

---

📦 전체 폴더 구조 요약

src/
├── app/
│   ├── store.ts
│   └── hooks.ts
├── features/
│   ├── auth/
│   │   └── authSlice.ts
│   ├── todo/
│   │   └── todoSlice.ts
│   ├── theme/
│   │   └── themeSlice.ts
│   └── filter/
│       └── filterSlice.ts
└── components/
    ├── TodoList.tsx
    ├── TodoItem.tsx
    └── LoginForm.tsx

---

✨ 다음에 이어서 구현할 수 있는 것들

• redux-persist로 상태 유지
• 각 기능을 컴포넌트로 만들기 (<TodoList />, <LoginForm />, <TagFilter />)
• Zustand로 대체하는 방식
• Firebase 인증 연동