$$config title: 학원 16일차 (list 수정할 값 받아오기, 수정-2 완성) keywords: - REACT $$ # 수정할 값 받아오기 ## 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 [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 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 ```jsx import React, {useEffect, useState} from 'react'; import "../styles/TodoEdit.scss"; const TodoEdit = ({onInsertToggle, selectedTodo}) => { const [value, setValue] = useState(""); const onChange = (e) => { setValue(e.target.value); }; const onSubmit = (e) => { e.preventDefault(); onInsertToggle(); }; useEffect(()=> { setValue(selectedTodo.text); }, [selectedTodo]); 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, setSelectedTodo }) => { 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, setSelectedTodo }) => { const { id, text, checked } = todo; return (

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

{text}

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

{ onRemove(id); }}>

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

Todo List

{children}

); } export default TodoTemplate; ``` ---
# 수정 ## 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 [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 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 ) ); }; const onUpdate = (id, text) => { setTodos((todos) => todos.map((todo) => (todo.id === id ? {...todo, text } : todo)) ); onInsertToggle(); } return ( {insertToggle && } ); }; export default App; ``` ## 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 TodoList; ```

수정하기

수정하기