앞에서 임시로 만들었던 삭제 기능에다가 리뷰 삭제 api를 연동하기
리퀘스트 함수를 구현하고 이것을 연결만 해주면 된다.
개발자도구에서 테스트해보기
response에서 적당한 아이디를 골라서 DELETE 메소드로 보내본다.
fetch('https://learn.codeit.kr/0633/film-reviews/27283', {method : 'DELETE'});
리퀘스트가 잘 보내지고 리스폰스로는 빈 객체가 도착한다.
코드에서 빈 객체를 가지고 성공여부를 판단할 것이다.
이제 api 함수를 추가해보기
우선 api.js파일에 deleteReview라는 함수를 만든다.
id를 받아서 DELETE 메소드로 리퀘스트를 보내도록 만든다.
App 컴포넌트에서는 handleDelete함수를 비동기함수로 만들 것이다.
async 추가deleteReview함수를 실행해준다.
삭제가 성공한 경우에만 그 결과를 반영할 것이다.
이 때 비동기로 State를 참조하는 것이므로 setter함수는 콜백으로 사용한다.
저장하고 확인해보면 삭제 버튼을 눌렀을 때 네트워크 리퀘스트가 잘 보내지고
페이지에서도 항목이 잘 사라지게 된다.
새로고침해도 앞에서 잘 지워진 것을 확인할 수 있다.
