todolist3 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. 투두리스트 오늘 리액트 투두리스트 보충 수업을 들으면서 map과filter에 개념에 대해서 한번 더 복습하였다 . import React from "react"; import Todo from "./Todo"; 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 ; })} ); } 일단 map 과 filter의 .. 2022. 12. 14. TodoList 연습 투두리스트 연습 import React, { useState } from "react"; import "./App.css"; import TodoBoard from "./components/TodoBoard"; function App() { const [input, setInput] = useState(""); const [todoList, setTodoList] = useState([]); const addItem = () => { setTodoList([...todoList, input]); }; return ( { setInput(event.target.value); }} > 추가 ); } export default App; 필요한 컴포넌트를 임폴트 해온다. state를 이용하여 데이터를 저장한다 .. 2022. 12. 13. 이전 1 다음
