[React] 간단하게 To-Do 리스트 만들어보기

안녕하세요. 오늘은 지난 시간에 배운 useState와 map, 버튼 기능을 모두 활용해서 투두리스트를 만들어 볼게요.

import React, { useState } from 'react';

const TodoApp = () => {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    if (input.trim() !== '') {
      setTodos([...todos, input]);
      setInput('');
    }
  };

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

  return (
    <div>
      <h1>팀노바 To-Do 리스트</h1>
      <div>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <button onClick={addTodo}>추가</button>
      </div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => removeTodo(index)}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

간단하게 할일을 추가하고 삭제하는 기능이 있고, 다음에는 좀 더 기능을 추가해볼게요.