📖[React] PUT(수정), DELETE(삭제)

Update - PUT Method 사용

입력하면, 유지되도록 하는 예제

Words.js

 function toggleDone() {
    //  setIsDone(!isDone);
    fetch(`http://localhost:3001/words/${word.id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json", //보내는 resource의 type(문자열, html, image등 여러가지)
      },
      //실어서 보내는 정보들을 입력
      body: JSON.stringify({
        ...word,
        isDone: !isDone,
      }),
    }).then((res) => {
      if (res.ok) {
        setIsDone(!isDone);
      }
    });
  }

PUT 메소드 사용

1. fetch를 사용하여 url 불러오기
2. 사용하는 method : 'PUT'
3. header에 보내는 resource의 type 입력 ("Content-Type": "application/json")
4. body에 상태를 어떻게 변화시킬 것인지 써줌
   이때 JSON파일을 string형식으로 바꿈 JSON.stringify이용
   ...word는 기존에 있는 word db)
5. 모두다 불러왔으면 (then) response가 만약 ok(res.ok)이면 setIsDone을 바꾸어줌(데이터를 바꾸어줌)

DELETE - DELETE Method 사용

Words.js

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

DELETE 메소드 사용

1. fetch를 사용하여 url 불러오기
2. 사용하는 method : 'DELETE'
3. 이때, 확실히 삭제할 것인지 확인 window.confirm('확인문구')
4. 맞다면 DELETE메소드 사용
5. DELETE는 전해줄 data가 없으므로 header나 body가 필요 없음
   
   삭제버튼을 누르면, 경고문이 뜨고 확인을 누르고 새로 고침을 하면 삭제됨.
   버튼을 누르고 삭제를 누르면 실제 단어는 지워짐 하지만,
   페이지에는 어떤 변화도 없음 -> 삭제된 이후 단어 리스트를 다시 그려주지 않음
   즉, 단어 리스트에는 남아 있음(콘솔창 확인)
   이때 null을 return해주면 아무것도 표현되지 않음 => 단어 리스트에서 지워짐

단어 리스트에서 지우기(db)

Words.js

export default function Word({ word: w }) {
  const [word, setWord] = useState(w);
function del() {
    if (window.confirm("삭제하시겠습니까?")) {
      fetch(`http://localhost:3001/words/${word.id}`, {
        method: "DELETE",
      }).then((res) => {
        if (res.ok) {
          setWord({ id: 0 });
        }
      });
    }
  }
if (word.id === 0) {
    return null;
  }

1. function Word({word : w }) { const [word, setWord] = useState(w);
   받아온 props를 w라는 새로운 변수로 받음
2. DELETE 메소드가 성공하면, word의 id를 0으로 설정
3. if (word.id === 0) { return null; }로 word의 id가 0이 되면 null 반환
4. 따라서... db에서 삭제한 word는 사라짐!!