$$config title: 학원 16일차 (todolist 삭제, 수정-1) keywords: - REACT - ... $$ # list 수정 버튼 활성화/비활성화 , 삭제 ## App.jsx ```jsx import React, { useRef, useState } from 'react'; import TodoTemplate from './components/TodoTemplate'; import TodoInsert from './components/TodoInsert'; import TodoList from './components/TodoList'; import TodoEdit from './components/TodoEdit'; function App () { const [todos, setTodos] = useState([]); const [insertToggle , setInsertToggle ] = useState(false); const nextId = useRef(1); const onInsert = (text) => { const todo = { id : nextId.current, text : text, checked : false, }; setTodos((todos) => todos.concat(todo)); nextId.current++; }; const onRemove = id => { setTodos(todos => todos.filter(todo => todo.id !== id)); } const onInsertToggle = () => { setInsertToggle((prev) => !prev); } const onToggle = (id) => { setTodos((todos) => todos.map((todo) => todo.id === id ? {...todo, checked: !todo.checked} : todo ) ); }; return ( {insertToggle && } ); }; export default App; ``` ## TodoEdit ```jsx import React, {useState} from 'react'; import "../styles/TodoEdit.scss"; const TodoEdit = ({onInsertToggle}) => { const [value, setValue] = useState(""); const onChange = (e) => { setValue(e.target.value); }; const onSubmit = (e) => { e.preventDefault(); onInsertToggle(); }; return (

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

))}

); }; export default TodoList; ``` ## 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, onToggle, onRemove, onInsertToggle }) => { const { id, text, checked } = todo; return (

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

{text}

{ onInsertToggle(); }}>

{ onRemove(id); }}>

); }; export default TodoListItem; ``` ## TodoTemplate.jsx ```jsx import "../styles/TodoTemplate.scss"; function TodoTemplate({ children }) { return (

Todo List

{children}

); } export default TodoTemplate; ``` ## TodoInsert.jsx ```jsx import React, { useState } from "react"; import { MdAdd } from "react-icons/md"; import "../styles/TodoInsert.scss"; const TodoInsert = ({ onInsert }) => { const [value, setValue] = useState(""); const onChange = (e) => { setValue(e.target.value); }; const onSubmit = (e) => { e.preventDefault(); setValue(""); onInsert(value); }; return ( ); }; export default TodoInsert; ``` ## 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; } } ```

수정하기