삭제 기능 추가

 

이제 추가된 각 동물의 목록(Pet 컴포넌트) 에 삭제 버튼을 추가하여 

목록에 있는 동물을 삭제하는 기능을 구현하고자 한다. 

 

Pet 컴포넌트에서 props를 id 값이 넘어 가도록 작성한다. 

해당 아이디 값으로 filter를 사용하여 

삭제할 예정임

 

 

그리고 setPets함수도 넘겨줘서, 

Pets의 변동이 있을 때 ( 삭제 처리) 바로 리랜더링하도록 할 예정이다. 

 

 

 

 

일단 버튼을 추가해주고 

삭제 버튼을 클릭하면 handleDelete 함수가 실행되도록 한다.

handleDelete함수는   삭제 버튼 클릭! 이라는 메세지를 담은 alert창을 띄운다. 

 

 

 

 

 

 

 

 

 

handleDelete함수를 수정한다. 

props에서 넘어오는 setPets함수를 사용할거고 

 

이 함수의 주요 목적은 props.id와 각 pet의 id를 비교하여 props.id와 일치하지 않는(pet를 삭제해야 할 대상이 아닌) 모든 pet을 포함하는 새로운 배열을 생성하는 것이다.

이렇게 생성된 배열은 setPets를 통해 컴포넌트의 상태로 설정되어 해당 요소가 삭제된 것으로 효과를 내게 됩니다

 

 

 

테스트하기