import { useState } from "react";
import TodoItem from "./TodoItem";
function TodoList() {
const [todoList, setTodoList] = useState([]);
const [inputValue, setInputValue] = useState('');
const addTodoItem = () => {
const newTodo = { id: todoList.length, text: inputValue, completed: false };
setTodoList([...todoList, newTodo]);
setInputValue('');
};
const toggleComplete = (id) => {
setTodoList(todoList.map(item =>
item.id === id ? { ...item, completed: !item.completed } : item
));
};
return (
<>
<div className="todo-btn">
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="할 일을 입력해주세요."
/>
<button onClick={addTodoItem}>제출</button>
</div>
<br />
<div>
<TodoItem todoList={todoList} toggleComplete={toggleComplete} />
</div>
</>
);
}
export default TodoList;
function TodoListItem({ item, index, toggleComplete }) {
return (
<div
className="todo-item"
onClick={() => toggleComplete(item.id)}
style={{
textDecoration: item.completed ? 'line-through' : 'none',
}}
>
{index + 1}. {item.text}
</div>
);
}
export default TodoListItem;
import TodoListItem from "./TodoListItem";
function TodoItem({ todoList, toggleComplete }) {
return (
<div>
{todoList.map((item, index) => (
<TodoListItem
key={item.id}
item={item}
index={index}
toggleComplete={toggleComplete}
/>
))}
</div>
);
}
export default TodoItem;