AI 다이어트 고민상담react로 to-do-list를 관리하는 애플리케이션을 작성해 줘

스위치온 다이어트와 관련된 질문이 아닌 것 같아 보이지만, React를 사용한 to-do list 애플리케이션 개발 방법을 알려드릴게요!

기본 구조

1. React 앱 생성:

   • Create React App을 사용해서 새로운 프로젝트를 생성합니다.

   npx create-react-app todo-list
   cd todo-list
   

2. 기본 컴포넌트 설계:

   • App.js를 수정하여 기본 to-do 리스트 구조를 설계합니다.

코드 예시

아래는 간단한 to-do 리스트 애플리케이션의 코드입니다.

import React, { useState } from 'react';

function App() {
  const [task, setTask] = useState('');
  const [todos, setTodos] = useState([]);

  const handleAddTask = () => {
    if (task) {
      setTodos([...todos, task]);
      setTask('');
    }
  };

  const handleDeleteTask = (index) => {
    const newTodos = todos.filter((_, i) => i !== index);
    setTodos(newTodos);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>To-Do List</h1>
      <input 
        type="text"
        value={task}
        onChange={(e) => setTask(e.target.value)}
        placeholder="할 일을 입력하세요"
      />
      <button onClick={handleAddTask}>추가</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => handleDeleteTask(index)}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

설명

1. 상태 관리:

   • useState를 사용해 입력되는 할 일을 관리하는 task와 to-do 리스트를 담는 todos 배열을 설정합니다.

2. 할 일 추가:

   • 입력 필드에 텍스트가 있을 때만 추가하도록 하고, 추가 버튼 클릭 시 리스트에 할 일이 추가됩니다.

3. 할 일 삭제:

   • 각 항목 옆에 삭제 버튼이 있어, 해당 항목을 클릭하면 리스트에서 제거됩니다.

실행

애플리케이션을 실행하려면 터미널에서 아래 명령어를 입력하세요.

npm start

추가 사항

이 코드에서는 기본적인 입력과 삭제 기능을 구현했습니다. 필요에 따라 다음과 같은 기능을 추가할 수 있습니다:

• 할 일 완료 표시 기능
• 우선순위 지정 기능
• 로컬 스토리지에 데이터 저장

이 기본적인 구조를 바탕으로 원하는 대로 기능을 확장할 수 있습니다. 도움이 필요하면 언제든지 물어보세요!

(📢 광고) 필요한 다이어트 식품들 골라놨어요.(할인여부 포함)