Redux Toolkit 소개

맛없는콩두유·2024년 12월 18일

JavaScript React redux redux-toolkit

Redux Toolkit Todo 애플리케이션 구조

redux

이 그림은 Redux Toolkit을 사용한 Todo 애플리케이션의 구조를 설명합니다. 주요 컴포넌트와 데이터 흐름을 시각적으로 나타내고 있습니다.

구성 요소

App 컴포넌트: 애플리케이션의 최상위 컴포넌트로, 다른 컴포넌트를 포함합니다.
TodoInput 컴포넌트: 사용자가 Todo 항목을 추가할 수 있는 입력 필드와 버튼을 제공합니다.
TodoList 컴포넌트: 현재 Todo 항목을 표시하고 삭제할 수 있는 기능을 제공합니다.
액션: addTodo와 deleteTodo 액션은 각각 Todo 항목 추가 및 삭제를 처리합니다.
스토어: Redux 스토어는 애플리케이션의 상태를 관리하며, 상태 업데이트 후 컴포넌트에 변경 사항을 전달합니다.

동작 순서

사용자가 TodoInput에서 할 일을 입력하고 "추가하기" 버튼을 클릭합니다.
addTodo 액션이 디스패치되어 새로운 Todo 항목이 스토어에 추가됩니다.
스토어가 업데이트되고, 상태 변화가 App 컴포넌트에 전달됩니다.
TodoList 컴포넌트가 업데이트되어 새로운 Todo 항목이 화면에 표시됩니다.
사용자가 TodoList에서 "삭제" 버튼을 클릭하면 deleteTodo 액션이 디스패치됩니다.
스토어에서 해당 Todo 항목이 삭제되고, 상태 변화가 App 컴포넌트에 전달됩니다.
TodoList 컴포넌트가 업데이트되어 삭제된 Todo 항목이 화면에서 사라집니다.

Redux Toolkit 소개

Redux Toolkit은 Redux의 공식 도구 모음으로, Redux를 더 쉽게 사용할 수 있도록 설계되었습니다. 주요 장점은 다음과 같습니다:

Redux Toolkit의 장점

간편한 설정: Redux 스토어 설정을 간단하게 만들어줍니다.
불변성 관리: Immer 라이브러리를 사용하여 불변성을 유지하는 코드를 더 간단하게 작성할 수 있습니다.
자동 액션 생성 및 리듀서: createSlice를 사용하여 액션과 리듀서를 자동으로 생성할 수 있습니다.
미들웨어 통합: Redux DevTools 및 Thunk와 같은 미들웨어가 기본적으로 포함되어 있습니다.

Todo 애플리케이션 구현

아래는 Redux Toolkit을 사용하여 Todo 추가 및 삭제 기능을 구현한 예제입니다.

1단계: Redux Toolkit 설치

먼저, Redux Toolkit을 설치합니다. npm을 사용하여 설치할 수 있습니다.

npm install @reduxjs/toolkit react-redux

2단계: Redux Toolkit 설정

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useDispatch, useSelector } from 'react-redux';
import React from 'react';
import ReactDOM from 'react-dom';

// createSlice를 사용하여 리듀서 및 액션 생성
const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    },
    deleteTodo: (state, action) => {
      return state.filter((_, index) => index !== action.payload);
    }
  }
});

// 스토어 생성
const store = configureStore({
  reducer: {
    todos: todoSlice.reducer
  }
});

// TodoInput 컴포넌트
const TodoInput = () => {
  const [inputValue, setInputValue] = React.useState('');
  const dispatch = useDispatch();

  const handleAddTodo = () => {
    if (inputValue) {
      dispatch(todoSlice.actions.addTodo(inputValue));
      setInputValue('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="할 일을 입력하세요"
      />
      <button onClick={handleAddTodo}>추가하기</button>
    </div>
  );
};

// TodoList 컴포넌트
const TodoList = () => {
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  const handleDeleteTodo = (index) => {
    dispatch(todoSlice.actions.deleteTodo(index));
  };

  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>
          {todo}
          <button onClick={() => handleDeleteTodo(index)}>삭제</button>
        </li>
      ))}
    </ul>
  );
};

// 메인 App 컴포넌트
const App = () => {
  return (
    <Provider store={store}>
      <h1>Todo 애플리케이션</h1>
      <TodoInput />
      <TodoList />
    </Provider>
  );
};

// ReactDOM을 사용하여 렌더링
ReactDOM.render(<App />, document.getElementById('root'));

코드 설명

createSlice: createSlice를 사용하여 todos 상태를 관리하는 슬라이스를 생성합니다. 이 슬라이스는 초기 상태와 리듀서를 포함합니다.

addTodo: Todo를 추가하는 리듀서입니다.
deleteTodo: 특정 인덱스의 Todo를 삭제하는 리듀서입니다.

configureStore: 스토어를 생성할 때 configureStore를 사용합니다. 이 함수는 Redux DevTools와 같은 기본 설정을 자동으로 처리합니다.
컴포넌트: TodoInput과 TodoList 컴포넌트는 Redux와 유사하게 작동하지만, 액션을 디스패치할 때 Redux Toolkit에서 todoSlice.actions를 사용합니다.