7. Delete: 할 일 삭제하기

강의로 들으시려면 (인프런)한 입 크기로 잘라먹는 리액트 10% 쿠폰 받기 (기간 한정)

기능 흐름 살펴보기 

1. 삭제하려는 할 일 아이템에서 <삭제> 버튼을 클릭합니다. 

2. 할 일을 삭제하는 함수 onDelete를 호출합니다. 이 함수는 App의 State 값을 업데이트하므로 미리 App 컴포넌트에서 Props로 전달해야 합니다. 

3. <삭제> 버튼을 클릭하면 삭제할 할 일 아이템만 빼고, 새 배열을 만들어 State 값을 업데이트합니다. 

4. State 변수 todo가 업데이트되면, App가 TodoList 컴포넌트에 전달한 Props 의 값도 변경됩니다. 

5. TodoList 컴포넌트는 Props의 값이 변경되면 리렌더됩니다. 이때 새로운 배 열 todo로 할 일 리스트 다시 렌더링합니다.

아이템 삭제 함수 만들기 

① TodoItem의 <삭제> 버튼을 클릭 했을때 호출하는 함수 onDelete는 매개변수 targetId에 삭제 할 일기 아이템의 id를 저장합니다. 그리고 해당 id 요소를 뺀 새 배열로 todo를 업데이트 함으로써 대상 아이템을 삭제합니다. 

② 함수 onDelete는 TodoItem에서 <삭제> 버튼을 클릭할 때 호출합니다. 따라서 먼저 TodoList에 Props로 전달해야 합니다.

① Props를 구조 분해 할당합니다. 함수 onDelete를 추가합니다. 

② 함수 onDelete를 리스트의 모든 TodoItem에 Props로 전달합니다.

TodoItem 컴포넌트에서 삭제 함수 호출하기 

① Props를 구조 분해 할당합니다. 함수 onDelete를 추가합니다. 

② <삭제> 버튼을 클릭하면 호출할 함수 onClickDelete를 만듭니다. 이 함수는 함수 onDelete를 호출하고 인수로 해당 아이템의 id를 전달합니다. 

③ <삭제> 버튼의 onClick 이벤트 핸들러로 함수 onClickDelete를 설정합니다.