리액트 기초 공부해보기 #23 마지막 글 수정삭제

지난 시간에 이어 수정하기와 삭제하기를 만들겠다.

우선 수정, 삭제 버튼을 만들어주고 클릭시 deleteBook이라는 함수를 부른다. 그리고 이 함수가 호출되면 fetch로 DELETE 요청을 하고 서버를 만들때 리턴되는 값을 "ok"로만 지정했으니 응답값 기대를 text로 한다. 그리고 삭제 완료가 이루어지면 alert창 띄우고 홈으로 이동!

여기서 삭제 버튼을 누르면

이렇게 alert창이 뜨고

원래 제목1 밑에 제목3이 있었는데 삭제가 되었다.

그리고 콘솔엔 내가 찍어놨던 res값과 상태가 변경되었으니 그림을 다시 그리게 되어 제목1의 글 밖에 남지 않았다.

그리고 수정버튼을 누를시 updateForm으로 이동하도록 설정하자.
updateForm은 그냥 saveForm거 그대로 복사해서 이름만 바꿔주고 넘긴 id를 통해 변경할 객체를 가지고 오자. 그리고 fetch로 요청하여 해당 게시글을 들고 온다.

이렇게 받아서 상태값 변경 해주고

book값을 value에 넣어주고

PUT요청을 통해 다시 요청!!

상세보기 페이지에서 수정을 누르고

변경하여 submit을 누르면

변경이 잘 되었다.

이상으로 리액트 기초 및 스프링부트 서버와 연결 공부를 마치도록 하겠다.
이 글은 유튜브 메타코딩 채널의 영상을 보며 공부한 내용을 기록한 게시글입니다.