$$config title: [React]Todo-list 기능 만들기2_ 항목삭제, 수정 keywords: - React $$ # 알아보기 - onSubmit - eslint - 코딩 스타일을 고정함으로써 여러명이 코딩할 때에 일관성 있게 해줌. - typescript - daisyUI 버튼 등 UI 가져오기 # 1. 항목 삭제 추가 ## 1-1. App.js ```js const onRemove = (id) => { setTodos((todos) => todos.filter((todo) => todo.id !== id)); }; ``` ## 1-2. components > TodoList.jsx ```js import React from "react"; import TodoListItem from "./TodoListItem"; import "../styles/TodoList.scss"; const TodoList = ({ todos, onRemove, onToggle }) => { return (

))}

); }; export default TodoList; ``` ## 1-3. components > TodoListItem.jsx ```js 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 }) => { const { id, text, checked } = todo; return (

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

{text}

{}}>

{ onRemove(id); }} >

); }; export default TodoListItem; ``` # 2. 항목 수정 만들기 ## 2-1. components > TodoEdit.jsx 파일 생성 ```js import React from 'react'; const TodoEdit = () => { const [value, setValue] = useState(""); const onChange = () => {}; return (

); }; export default TodoEdit; ``` ## 2-2. styles > TodoEdit.scss 생성 ```js .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; } } ``` ## 2-3. App.js 추가 ```js ``` # 3. 수정하기 버튼 클릭시 팝업 TEXT에 기존 할일 내용 표시 ## 3-1. App.js ```js function App() { const [todos, setTodos] = useState([]); const [insertToggle, setInsertToggle] = useState(false); const [selectedTodo, setSelectedTodo] = useState(null); const nextId = useRef(1); const onInsert = (text) => { onRemove={onRemove} onToggle={onToggle} onInsertToggle={onInsertToggle} setSelectedTodo={setSelectedTodo} /> {insertToggle && ( )} ``` ## 3-2. components > TodoEdit.jsx ```js import React, { useEffect, useState } from "react"; ``` ```js const TodoEdit = ({ onInsertToggle, selectedTodo }) => { const [value, setValue] = useState(""); const onChange = (e) => { setValue(e.target.value); ``` ```js useEffect(() => { setValue(selectedTodo.text); }, [selectedTodo]); ``` ## 3-3. components > TodoList.jsx ```js const TodoList = ({ todos, onRemove, onToggle, onInsertToggle, setSelectedTodo, }) => { return (

{todos.map((todo, index) => ( onRemove={onRemove} onToggle={onToggle} onInsertToggle={onInsertToggle} setSelectedTodo={setSelectedTodo} /> ))} ``` ## 3-4. components > TodoListItem.jsx ```js const TodoListItem = ({ todo, onRemove, onToggle, onInsertToggle, setSelectedTodo, }) => { const { id, text, checked } = todo; return (

className="edit" onClick={() => { onInsertToggle(); setSelectedTodo((prev) => todo); }} > ``` # 4. Todo 항목 수정을 실제 기능토록 하기 ## 4-1. App.js ```js import TestComponent from "./components/TestComponent"; ``` ```js const onUpdate = (id, text) => { setTodos((todos) => todos.map((todo) => (todo.id === id ? { ...todo, text } : todo)) ); onInsertToggle(); }; ``` ```js ``` ## 4-2. components > TodoEdit.jsx ```js const TodoEdit = ({ selectedTodo, onUpdate }) => { ``` ```js const onSubmit = (e) => { e.preventDefault(); onUpdate(selectedTodo.id, value); setValue(""); }; ```