데이터 삭제하기

2021. 4. 25. 20:57개발 프로젝트/[리액트] 게시판 만들기

https://www.zerocho.com/category/HTML&DOM/post/59465380f2c7fb0018a1a263

1. 액션과 액션 크리에이터를 생성해준다.

const DEL_POST = "post/DEL_POST";
// post = 모듈명
// DEL_POST = 액션명
const delPost = createAction(DEL_POST, (post_id) => ({post_id}));

const delPost = createAction(액션타입, (post_id) => ({post_id}));

그리고 타입 외에 추가적인 필드를 넣을 수 있다.

여기서 post_id는 삭제할 데이터(i guess..)

 

2. axios를 사용하여 api연결해준다.

delPostDB라는 함수를 만들어주는데

form형식으로 데이터를 보내기위해선 new FormData를 만들어줘야한다.

(참고로 formData는 이미지 전송이 필요할때 주로 사용)

let formData = new FormData() // new FormData로 새로운 객체 형성

append method를 사용해 키(objid), 값(post_id)을 전송

formdata설명 블로그 참고

 

axios

data: 보낼 데이터

.then -> 응답 성공시 

.catch(e) -> 응답 실패시

 

이제 Detail.js로와서

액션 생성함수를 postActions로 불러와주고 delPostDB를 디스패치를 사용해 실행시켜준다.

마지막으로 삭제하기 버튼에 onClick함수를 심어준다.