TodoList/TodoList 추가기능구현2 완료,삭제 기능 구현 저번에 만들던 투두리스트에서 삭제기능과 완료기능 , 취소 기능을 구현해 보았다 export default function TodoList({ todos, isActive, setTodos }) { const todoBox = { border: "1px solid black", padding: "20px" }; return ( {isActive === true ? "해야 할 일" : "완료 한 일 "} {todos .filter((item) => item.isDone === !isActive) .map((item) => { return ; })} ); } 기존에 있는 투두리스트에서 투두로 컴포넌트로 나누었다. export default function Todo({ setTodos, isActive, ite.. 2022. 12. 16. TodoList 추가 기능 구현 export default function Input({ setTodos }) { const [title, setTitle] = useState(""); const [contents, setContents] = useState(""); const handleSubmitChange = (event) => { event.preventDefault(); const newTodo = { title: title, contents: contents, isDone: false, id: uuidv4(), }; setTodos((prev) => { return [...prev, newTodo]; }); }; const handleTitleChange = (event) => { setTitle(event.target.va.. 2022. 12. 14. 이전 1 다음