redux-toolkit todolist - chatGPT

Redux Toolkit을 사용하여 간단한 to-do 리스트를 만들어 보겠습니다. Redux Toolkit은 Redux를 보다 간편하게 사용할 수 있도록 도와주는 라이브러리입니다.

1. 먼저, Redux Toolkit 및 관련 라이브러리를 설치합니다.

npm install @reduxjs/toolkit react-redux

2. Redux Toolkit 스토어를 설정합니다.

Redux Toolkit을 사용하여 스토어를 설정합니다.

// src/store.js

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

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push({
        id: state.length + 1,
        text: action.payload,
        completed: false,
      });
    },
    toggleTodo: (state, action) => {
      const todo = state.find((todo) => todo.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
  },
});

export const { addTodo, toggleTodo } = todosSlice.actions;

export const selectTodos = (state) => state.todos;

const store = configureStore({
  reducer: todosSlice.reducer,
});

export default store;

3. React 컴포넌트를 작성합니다.

Redux Toolkit을 사용하여 to-do 리스트를 표시하고 상태를 변경하는 React 컴포넌트를 작성합니다.

// src/components/TodoList.js

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addTodo, toggleTodo, selectTodos } from '../store';

const TodoList = () => {
  const dispatch = useDispatch();
  const todos = useSelector(selectTodos);
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo.trim() === '') return;
    dispatch(addTodo(newTodo));
    setNewTodo('');
  };

  const handleToggleTodo = (id) => {
    dispatch(toggleTodo(id));
  };

  return (
    <div>
      <h1>Todo List</h1>
      <div>
        <input
          type="text"
          placeholder="할 일을 입력하세요"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
        />
        <button onClick={handleAddTodo}>추가</button>
      </div>
      <ul>
        {todos.map((todo) => (
          <li
            key={todo.id}
            onClick={() => handleToggleTodo(todo.id)}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

4. 애플리케이션의 진입점을 설정합니다.

Redux Toolkit 스토어를 React 애플리케이션에 연결하고 TodoList 컴포넌트를 렌더링합니다.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import TodoList from './components/TodoList';

ReactDOM.render(
  <Provider store={store}>
    <TodoList />
  </Provider>,
  document.getElementById('root')
);

이제 간단한 Redux Toolkit을 사용한 to-do 리스트 애플리케이션이 준비되었습니다. 필요한 경우 스타일링과 추가 기능을 구현하여 확장할 수 있습니다.