리액트 useEffect 질문입니다!

Question

import { useEffect, useState } from 'react'; export default function TodoComplete() { const [todo, setTodo] = useState('') const [todos, setTodos] = useState([]) const handleInput = e => { setTodo(e.target.value) } const handleAdd = e => { e.preventDefault(); if (todo === "") return; setTodos(prevTodos => { return [...prevTodos, { id: todos.length + 1, title: todo, completed: false }] }) setTodo('') } const handleDelete = () => { const newTodos = todos.filter(todo => !todo.complete) setTodos(newTodos) } const toggleTodo = (id) => { const newTodos = [...todos] const done = newTodos.find(todo => todo.id === id) // done is an object. reference type done.complete = !done.complete setTodos(newTodos) } return (

Todo List

Numbers : {todos.filter(todo => !todo.complete).length}

); } function TodoList({ todos, toggleTodo }) { return ( todos.map(todo => { return }) ) } function Todo({ todo, toggleTodo }) { const handleDoneClick = () => { toggleTodo(todo.id) } return (

{todo.title}

) } react로 투두리스트를 만들고 있습니다.delete 키를 눌렀을 때 밑에 이미지 처럼 구현하고 싶은데 dep 부분에 어떤 배열을 넣어야 하는지 전혀 감이 안 잡히는 거 같습니다. 도와주세요 힌트라도 주시면 감사하겠습니다 선배님들 ㅠㅠuseEffect(()=>{ window.confirm("선택 항목을 삭제하겠습니까?") })

킁킁탐정 · Answer

간단하게 구현하면 다음과 같습니다. 추가한 부분에 // CHECK 주석을 달았습니다.https://codesandbox.io/s/muddy-voice-ifgz5r?file&#61;/src/App.js간단한 변경이므로 별도로 설명은 생략합니다. 기타 다른 부분은 건들지 않았고 이 구현 방법 외에 다양하고 더 좋은 방식도 많으니 여러 코드를 참조하시길 권해드립니다.

리액트 useEffect 질문입니다!

1개의 답변

Q&A 목록