[React]코딩앙마-voca-(Update - PUT, Delete - DELETE)

 

 

     Update - PUT (수정) 새로고침했을때 상태유지가 된다 오호호홓

fetch(`주소`, {object}) .then((res) => { if(res.ok) { ok일때의액션 }})

object내용은 method: "메소드", headers: {"컨텐츠타입":"어플제이쓴"}, body: {내용}

📒Word.js 부분수정

  function toggleDone() {
    // setIsDone(!isDone);
    fetch(`http://localhost:3001/words/${el.id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        ...el,
        isDone: !isDone,
      }),
    }).then((res) => {
      if (res.ok) {
        setIsDone(!isDone);
      }
    });
  }

 

 

     Delete - DELETE (삭제)

delete는 메소드만 뙇ㅎㅎ

📒Word.js에

1️⃣함수추가

window.confirm덕분에 팝업이 뜬다.

  function del() {
    if (window.confirm("정말 삭제하시겠습니까?")) {
      fetch(`http://localhost:3001/words/${el.id}`, {
        method: "DELETE",
      });
    }
  }

2️⃣하단 삭제 버튼 태그에 함수이름 del 추가해주기

`onClick={del}`

그런데 문제는, 삭제는 정상적으로 되었으나 화면을 다시 그려주지 않아서 갱신할때까지 ••• 그냥 남아있는 상태이다 ㅋㅋ이무슨

그래서 상태를 주시하도록 state로 이어줘야한다.

DELETE 이거쫌어렵다 props변수명을 같게하면 안된다니??

코드는여기에

📒Word.js에 함수수정 + useState추가

export default function Word({ el }) {
  const [word, setWords] = useState(el.id); //상단에 useState추가

function del() {
    if (window.confirm("정말 삭제하시겠습니까?")) {
      fetch(`http://localhost:3001/words/${el.id}`, {
        method: "DELETE",
      }).then((res) => {
        if (res.ok) {
          setWords({ id: 0 });//0으로만 바꿔주는줄알았더니 진짜 .json파일에서 삭제됨ㅎㄷㄷ
        }
      });
    }
  }
  if (word.id === 0) {
    return null;
  }