데이터 삭제하기
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)을 전송
axios
data: 보낼 데이터
.then -> 응답 성공시
.catch(e) -> 응답 실패시
이제 Detail.js로와서
액션 생성함수를 postActions로 불러와주고 delPostDB를 디스패치를 사용해 실행시켜준다.
마지막으로 삭제하기 버튼에 onClick함수를 심어준다.
'개발 프로젝트 > [리액트] 게시판 만들기' 카테고리의 다른 글
데이터 수정하기 (0) | 2021.04.26 |
---|---|
데이터 추가하기 (0) | 2021.04.25 |
데이터 불러오기!! (0) | 2021.04.19 |
글쓰기 기능 구현1 (0) | 2021.04.16 |
onClick 함수 Cannot read property 'push' of undefined에러 (0) | 2021.04.15 |