[React] 25. TODO LIST 앱 / Delete - 투두 삭제

Mar 06, 2026

Contents

이번 단계에서는 투두를 삭제하는 기능을 만들어보자.

1. App 컴포넌트에서 투두 상태 삭제 함수 작성

먼저 onDelete라는 이름의 투두를 삭제하는 함수를 만들자.

그리고 인수로는 targetId를 만들어 삭제 버튼의 타겟이 되는

요소의 아이디를 받을 수 있게 하자.

그 다음 상태변경 함수인 setTodos를 호출하여 인수로

todos 배열에서 targetId와 일치하는 id를 갖는 요소의 데이터만

삭제할 수 있도록 filter메서드를 사용하여 서로 일치하지 않는 것만

필터링하여 보여줄 수 있도록 하자.


const onDelete = (targetId) => {
    setTodos(todos.filter((todo) => todo.id !== targetId));
  };

다음으로 만들어진 onDelete함수를 하위 컴포넌트로 전달하자.

현재 함수가 만들어진 App컴포넌트에서 TodoItem까지 내려야한다.


App → List → TodoItem

먼저 App컴포넌트에서 List컴포넌트에 props로 onDelete를 넘기자.


<List todos={todos} onUpdate={onUpdate} onDelete={onDelete} />

List컴포넌트에서 구조분해할당 문법을 사용하여 onDelete를

props로 받아주고, 다시 TodoItem으로 넘기자.

마지막으로 TodoItem컴포넌트에서 이를 props로 받는다.

props로 부모에게 받은 onDelete를 실행시키는

이벤트 핸들러를 만들자.

클릭한 요소의 id값이 필요하니 onDelete함수의

매개변수로 id를 넣어주자.


const onClickDeleteButton = () => {
    onDelete(id);
  };

마지막으로 삭제버튼의 onClick이벤트로 만들어둔

이벤트 핸들러를 넣어주면 삭제 로직은 완성이다.


<button onClick={onClickDeleteButton}>삭제</button>

두 번째 투두 요소 삭제 버튼을 클릭했을 때

1의 id값을 가지고 있던 요소가 사라진 것을 확인할 수 있다.