$$config title: 22.08.03[React] keywords: - IT - React $$ # 수업내용 --- ## react-todolist ### src > app.js ```js import React, { useRef, useState } from "react"; import TodoEdit from "./components/TodoEdit"; import TodoInsert from "./components/TodoInsert"; import TodoList from "./components/TodoList"; import TodoTemplate from "./components/TodoTemplate"; function App() { const [todos, setTodos] = useState([]); const [insertToggle, setInsertToggle] = useState(false); const [selectedTodo, setSelectedTodo] = useState(null); const nextId = useRef(1); const onInsert = (text) => { const todo = { id: nextId.current, text: text, checked: false, }; setTodos((todos) => todos.concat(todo)); nextId.current++; }; const onInsertToggle = () => { setInsertToggle((prev) => !prev); }; const onRemove = (id) => { setTodos((todos) => todos.filter((todo) => todo.id !== id)); }; const onToggle = (id) => { setTodos((todos) => todos.map((todo) => todo.id === id ? { ...todo, checked: !todo.checked } : todo ) ); }; const onUpdate = (id, text) => { setTodos((todos) => todos.map((todo) => (todo.id === id ? { ...todo, text } : todo)) ); onInsertToggle(); }; return ( {insertToggle && ( )} ); } export default App; ``` --- ### src > index.css ```css body { margin: 0; padding: 0; background: #e9ecef; } ``` --- ### src > index.js ```js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import "./index.css"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); ``` --- ### src > components > TodoEdit.jsx ```jsx import React, { useEffect, useState } from "react"; import "../styles/TodoEdit.scss"; const TodoEdit = ({ selectedTodo, onUpdate }) => { const [value, setValue] = useState(""); const onChange = (e) => { setValue(e.target.value); }; const onSubmit = (e) => { e.preventDefault(); onUpdate(selectedTodo.id, value); setValue(""); }; useEffect(() => { setValue(selectedTodo.text); }, [selectedTodo]); return (

); }; export default TodoEdit; ``` --- ### src > components > TodoList.jsx ```jsx import React from "react"; import TodoListItem from "./TodoListItem"; import "../styles/TodoList.scss"; const TodoList = ({ todos, onRemove, onToggle, onInsertToggle, setSelectedTodo, }) => { return (

))}

); }; export default TodoList; ``` --- ### src > components > TodoListItem.jsx ```jsx import React from "react"; import { MdCheckBoxOutlineBlank, MdRemoveCircleOutline, MdCheckBox, MdModeEditOutline, } from "react-icons/md"; import cn from "classnames"; import "../styles/TodoListItem.scss"; const TodoListItem = ({ todo, onRemove, onToggle, onInsertToggle, setSelectedTodo, }) => { const { id, text, checked } = todo; return (

{ onToggle(id); }} > {checked ? : }

{text}

{ onInsertToggle(); setSelectedTodo((prev) => todo); }} >

{ onRemove(id); }} >

); }; export default TodoListItem; ``` --- ### src > styles > TodoEdit.scss ```scss .background { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 5; background-color: rgba(0, 0, 0, 0.548); } .todoedit__insert { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; background-color: white; display: flex; justify-content: center; align-items: center; flex-direction: column; h2 { box-sizing: border-box; width: 100%; margin: 0; text-align: center; padding: 0.5rem; background-color: #9c88ff; color: white; } input { margin: 2rem 0; padding: 0.3rem; border: none; outline: none; border-bottom: 1px solid #9c88ff; } button { cursor: pointer; background-color: #9c88ff; border: none; color: white; padding: 0.5rem 1rem; margin-bottom: 1rem; } } ``` ---

수정하기