오늘은 여기 삭제 버튼 작업을 하겠습니다
이 작업은 이전에 한
작업의 반복이 많습니다
앱 컴포넌트에 함수를 추가해서
상태를 수정하고 프로젝트를 지우는 이 함수
그리고 이 함수를
이 SelectedProject 컴포넌트로 보내야 합니다
그렇게 해 보겠습니다
여기 앱 컴포넌트에 새로운 함수를 추가합니다
handleDeleteProject 함수로 추가합니다
여기서 상태를 업데이트 하기 위해
여기서 상태 업데이트 함수를 복사해서
handleDeleteProject에 붙이겠습니다
그리고 여기 selectedProjectID는
정의되지 않은 상태로 돌아와야 합니다
그러니까 프로젝트 선택을 안한 상태입니다
하지만 추가로 프로젝트 배열이 업데이트 되어야 합니다
업데이트는 변하지 않은 방식으로 되어야
저장되어 있는 기존의 배열을 바꾸지 않습니다
그 작업을 할 수 있는 좋은 방법은
Prev.state과 거기 저장된 프로젝트를
사용하고 filter메소드를 불러오는 것입니다
그것은 map and find와 같이
바닐라 자바스크립트에 내장된것입니다
Filter는 find and map과 비슷하게
함수를 입력값으로 받아서
이 배열에 모든 항목에 대해 실행됩니다
다시한번, find and map과 비슷한 방식입니다
하지만 이 함수에서는
어떤 요소를 유지해야 하는 경우 True,
삭제해야 하는 경우 False를 반환해야 합니다
그렇게 하면 filter은 새로운 배열을 만들어
삭제되지 않은 요소들만 보여줍니다
그러니까 이 함수가 True를 반환한 경우입니다
Find and map과 똑같이 이 함수는
여기 모든 항목을 입력값으로 받아들입니다
그리고 여기 항목을 유지하고 싶은 경우 True
지우고 싶은 경우 False가 반환됩니다
여기서는 제가 보고있는 프로젝트가
기존에 선택되었던 ID와 같지 않다면
이 항목을 지우고
False가 나오게 합니다
그 이유는 이 선택된 항목이 지워지기 때문입니다
그러니 여기서 prevState,
selectedProjectID를 사용할 수 있습니다
여기 ID가 일치하지 않다면 지워야 하는 항목이
아닌 것을 알 수 있습니다
그러니 이것은 True를 반환하여 그대로 두어야 합니다
ID가 동일하다면
제가 보고있는 이것을 지워야 합니다
그러니 여기선 False를 선택하여 아이템이 지워집니다
그것이 여기있는 handleDeleteProject 함수입니다
그리고 사실 지워져야 하는 ID가
입력값으로 필요하지 않은 이유는
여기 prevState에도 있기 때문입니다
따라서 이제 이 함수에 대한 포인터를 SelectedProject 컴포넌트에
전달해야 합니다
예를들어 onDelete라는 이름의 속성을 사용하면
컴포넌트 안에 있는이
속성으로 이 함수를 가져올 수 있습니다
그러니 SelectedProject로 돌아가서
새로 만든 onDelete을 이 삭제 버튼으로
추출합니다
그리고 이 함수에는 데이터가 필요하지 않기 때문에
값을 이렇게 onClick 속성으로 설정할 수 있습니다
그러면 이 삭제 버튼에서 해당 onDelete 속성에
수신된 함수를 불러옵니다
그렇게 저장을 하고 개발자 도구를 열어
에러가 있는지 확인하고, 삭제를 눌러 봅시다
프로젝트는 사라졌고 이 화면으로 돌아왔습니다
이제 빠르게 두개의 프로젝트를 추가하여
선택한 프로젝트만 지워지는지 확인해 봅니다
첫 번째를 선택하여 삭제를 누르면
다른 것은 아직 남아있습니다
즉 다 잘 작동하고 있습니다
이제 드디어 프로젝트 추가, 프로젝트 선택과
프로젝트 삭제가 모두 가능해졌습니다