mobx todolist - chagGPT

MobX를 사용하여 간단한 to-do 리스트를 만들어 보겠습니다. MobX는 상태 관리 라이브러리로, React 애플리케이션의 상태를 관리하는 데 도움을 줍니다.

1. 먼저, MobX와 관련 라이브러리를 설치합니다.

npm install mobx mobx-react-lite

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

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

// src/store.js

import { makeObservable, observable, action } from 'mobx';

class TodoStore {
  todos = [];

  constructor() {
    makeObservable(this, {
      todos: observable,
      addTodo: action,
      toggleTodo: action,
    });
  }

  addTodo(text) {
    this.todos.push({ id: Date.now(), text, completed: false });
  }

  toggleTodo(id) {
    const todo = this.todos.find((todo) => todo.id === id);
    if (todo) {
      todo.completed = !todo.completed;
    }
  }
}

const store = new TodoStore();
export default store;

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

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

// src/components/TodoList.js

import React, { useState } from 'react';
import { observer } from 'mobx-react-lite';
import store from '../store';

const TodoList = observer(() => {
  const [newTodo, setNewTodo] = useState('');

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

  const handleToggleTodo = (id) => {
    store.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>
        {store.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. 애플리케이션의 진입점을 설정합니다.

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

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './components/TodoList';

ReactDOM.render(
  <React.StrictMode>
    <TodoList />
  </React.StrictMode>,
  document.getElementById('root')
);

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