리액트 axios delete 요청방법

[장경민]

안녕하세요

노드 + 몽고 디비 강의를 토대로

리액트 환경에서도 적용중인데

get 요청을 이용한 게시글 추가는 알겠으나 

delet 요청을 하기 위해 axios 로 아래와 같이 요청을 보내고

(app.js)

useEffect(() => {
  axios
    .delete("/list2")
    .then((res) => {
      console.log("삭제");
    })
    .catch(() => {
      console.log("실패");
    });
}, []);

(server.js)

서버쪽은 

app.delete('/list2',function(요청, 응답){
  요청.body._id = parseInt(요청.body._id);
  db.collection('post').deleteOne(요청.body , function(에러, 결과){
      응답.status(200).send('성공');
  });
  console.log(요청.body)
});

 

이렇게 작성후 콘솔창에는 console.log("삭제") 가 잘출력되고 

서보쪽 콘솔에는 { _id: NaN } 으로 받아오고있습니다.

{ _id: NaN } 여기에 지우려는 데이터의 id 를 넣으면 삭제가 되는것일까요 ??

도통 감이 안잡혀서 질문드립니다.

 

delete 요청의 순서가 어떻게 되는건지도 알고싶습니다.

[codingapple]

axios.delete('주소', { data: {_id : 1} }) 이렇게 요청해야 서버의 요청.body 안에 잘 담길걸요 

[장경민]

(app.js)

<button onClick={del} className='btn_del' data-id={props.test._id} >삭제</button>

                <button onClick={(e)=>{
                  let 글번호 = e.target.dataset.id;
                  axios.delete('/list2',{
                    data: {_id : 글번호}
                  })
                  .then((결과)=>{console.log('성공');
                  })
                  .catch(()=>{console.log('실패')})
                  }} >삭제</button>

 

 

(server.js)

app.delete('/list2',function(요청, 응답){
  요청.body._id = parseInt(요청.body._id);
  db.collection('post').deleteOne(요청.body , function(에러, 결과){
      응답.status(200).send('성공');
  });
  console.log(요청.body)
});

data-id 를     

let 글번호 = e.target.dataset.id;
                          axios.delete('/list2',{
                          data: {_id : 글번호}
                         })

로 저장하고 서버콘솔창에서 { _id: NaN } 로 받아오고있습니다. 

[codingapple]

app.delete 안에 맨 첫줄에서 요청.body를 출력해봅시다 

[장경민]

app.delete('/list2',function(요청, 응답){
  console.log(요청.body)
  요청.body._id = parseInt(요청.body._id);
  db.collection('post').deleteOne(요청.body , function(에러, 결과){
      응답.status(200).send('성공');
  });
});

맨위에서 출력해보니 {} 가 나오고 있습니다.

[장경민]

app.delete('/list',function(요청, 응답){
  
  // 요청.body._id = parseInt(요청.body._id);
  db.collection('post').deleteOne(요청.body , function(에러, 결과){
      응답.status(200).send('성공');
  });
  
})

 

문자열을 숫자로 반환해주는 함수로 알고있었는데 db 사이트에서 _ID 는 int32 로 되어있어서 혹시 몰라 주석처리하니 바로 해결됬습니다. 

 

  // 요청.body._id = parseInt(요청.body._id);  

해결은 되었지만 정확한 원인을 알고싶습니다.

[codingapple]

NaN은 이상한 array object 이런 자료를 숫자로 변환하려고할 때 나오는 자료형입니다

숫자가아닌걸 다뤄서 그랬나봅니다 

[글쓴이]

글