[React] To-do List: 일정 삭제하기

React/한입 리액트

[React] To-do List: 일정 삭제하기

나디아 Nadia 2024. 3. 28. 18:23

일정 삭제하기

🔺 App.jsx

todos state 배열에서 targetId와 id가 일치하는 요소를 삭제한 배열을 생성하는 함수

삭제할 todo의 id를 가져옴 (targetId)
todos 배열에 인자로 todo를 넣고 모든 todo를 순회하여 todo의 id와 targetId가 일치하지 않은 것들만 필터링
👉 삭제 대상이 아닌 것들만 필터링

  const onDelete = (targetId) => { // 삭제할 todo의 id를 가져옴(targetId)
    setTodos(todos.filter((todo) => todo.id !== targetId))
    // todos 배열에서 모든 todo를 순회하여 todo의 id와 targetId가 일치하지 않은 것들만 필터링 => 삭제 대상이 아닌 것들만 필터링
  }

return문

일정 삭제 기능(onDelete)은 TodoItem 컴포넌트에서 실행할 수 있어야 하기 때문에 onDelete 함수를 List 컴포넌트로 전달한다. (TodoItem 컴포넌트는 List 컴포넌트 안에서 사용됨)

  return (
    <div className='App'>
      <Header/>
      <Editor onCreate={onCreate}/> 
      <List todos={todos} onUpdate={onUpdate} onDelete={onDelete}/> 
      {/* List.jsx에 props로 todos state, onUpdate(체크박스 기능), onDelete(삭제 기능) 전달 */}
    </div>
  )

🔺 List.jsx

onDelete 함수를 TodoItme 컴포넌트로 전달하는 일

const List = ({todos, onUpdate, onDelete}) => {

...

    return (
        <div className="List">
            <h1>Todo List 🌱</h1>
            <input 
                placeholder="검색어를 입력하세요"
                value={search} 
                onChange={onChangeSearch}
            />
            <div className="Todos_wrapper">
                {filteredTodos.map((todo) => { 
                    return <TodoItem 
                                key={todo.id} 
                                {...todo} 
                                onUpdate={onUpdate} 
                                onDelete={onDelete} 
                    // onDelete: TodoItem.jsx에 onDelete 함수 전달하기
                })}
            </div>
        </div>
    )

🔺 TodoItem.jsx

List 컴포넌트에서 onDelete 함수(삭제 기능) 받아오기

const TodoItem = ({id, isDone, content, date, onUpdate, onDelete}) => {

삭제 함수에 id를 인자로 전달한 버튼 클릭 시 실행되는 함수

onDelete 함수의 인자로 id 전달

    const onClickDelete = () => {
        onDelete(id);
        // onDelete 함수의 인자로 id 전달
    }

return문

삭제 버튼에 삭제 함수(onDelete) 이벤트 핸들러 설정

    return (
        // props로 받아온 todo의 내용물 적용시키기
        <div className="TodoItem">
            <input 
                type="checkbox" 
                checked={isDone} 
                onChange={onChangeCheckbox} 
            />
            <div className="content">{content}</div>
            <div className="date">{new Date(date).toLocaleDateString()}</div>

            <button onClick={onClickDelete}>삭제</button>
            {/* 버튼의 이벤트 핸들링 설정 */}
        </div>
    )