redux todoList - chatGPT

Redux를 사용하여 간단한 to-do 리스트를 만들어 보겠습니다. Redux는 JavaScript 애플리케이션의 상태를 관리하기 위한 상태 관리 라이브러리입니다.

1. 먼저, Redux를 설치합니다.

npm install redux react-redux

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

Redux 스토어는 애플리케이션의 상태를 저장하고 관리하는 곳입니다.

// src/store.js

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

3. 액션 타입과 액션 생성자를 정의합니다.

액션은 어떤 동작이 일어났음을 나타내는 객체입니다. 이 예제에서는 "ADD_TODO"와 "TOGGLE_TODO" 액션을 정의합니다.

// src/actions.js

export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';

export const addTodo = (text) => ({
  type: ADD_TODO,
  text,
});

export const toggleTodo = (id) => ({
  type: TOGGLE_TODO,
  id,
});

4. 리듀서를 작성합니다.

리듀서는 이전 상태와 액션을 받아 새로운 상태를 반환하는 함수입니다. 여기에서는 to-do 리스트를 관리하는 리듀서를 작성합니다.

// src/reducers.js

import { ADD_TODO, TOGGLE_TODO } from './actions';

const initialState = {
  todos: [],
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            id: state.todos.length + 1,
            text: action.text,
            completed: false,
          },
        ],
      };
    case TOGGLE_TODO:
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id
            ? { ...todo, completed: !todo.completed }
            : todo
        ),
      };
    default:
      return state;
  }
};

export default rootReducer;

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

Redux와 상호작용하는 React 컴포넌트를 작성합니다.

// src/components/TodoList.js

import React from 'react';
import { connect } from 'react-redux';
import { addTodo, toggleTodo } from '../actions';

const TodoList = ({ todos, dispatch }) => {
  const handleAddTodo = () => {
    const text = prompt('새로운 할 일을 입력하세요:');
    if (text) {
      dispatch(addTodo(text));
    }
  };

  return (
    <div>
      <button onClick={handleAddTodo}>할 일 추가</button>
      <ul>
        {todos.map((todo) => (
          <li
            key={todo.id}
            onClick={() => dispatch(toggleTodo(todo.id))}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

const mapStateToProps = (state) => ({
  todos: state.todos,
});

export default connect(mapStateToProps)(TodoList);

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

Redux 스토어를 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를 사용한 to-do 리스트 애플리케이션이 준비되었습니다. 필요한 경우 스타일링과 추가 기능을 구현하여 확장할 수 있습니다.