⚛️Start! React : section14 - PUT,DELETE구현

이번 시간에는 PUT을 이용해 체크박스의 체크여부와 DELETE를 구현할 것이다. 이 모든 수행은 Word.js에서 이루어진기 때문에 Word컴포넌트를 살펴보자.

import { useState } from "react";

export default function Word(props) {

  //state를 사용해서 각버튼과 상태를 표현하기 위해서 단어 부분을 따로 컴포넌트로 때어낸다.

  const [word, setWord] = useState(props.word)//삭제 상태

  const [isShow, setIsShow] = useState(false);

  const [isDone, setIsDone] = useState(word.isDone);

  //버튼이 클릭 되었을 때 구현

  function toggleShow() {

    setIsShow(!isShow);

  }

  function toggleDone() {

    fetch(`http://localhost:3001/words/${word.id}`, {

      method: "PUT",

      headers: {

        "Content-Type": "application/json",

      },

      body: JSON.stringify({

        ...word,

        isDone: !isDone,

      }),

    }).then(res => {

      if (res.ok) {

        setIsDone(!isDone)

      }

    })

  }

  if (word.id == 0) {

    return null;

  }

  function del() {

    if (window.confirm('삭제 하시겠습니까?')) {

      fetch(`http://localhost:3001/words/${word.id}`, {

        method: 'DELETE'

      }).then(res => {

        if (res.ok) {

          setWord({ id: 0 })

        }

      });

    }

  }

  /* key={props.word.id} 여기서 key를 지운다. */

  return (

    <tr className={isDone ? 'off' : ''}>

      <td>

        <input type="checkbox" checked={isDone} onChange={toggleDone}></input>

      </td>

      <td>{word.eng}</td>

      <td>{isShow && word.kor}</td>

      {/* isShow를 같이 두면서 true 여야지 보일 수 있다. ->짧은 서킷 평가(short-circuit evaluation) */}

      <td>

        <button onClick={toggleShow}>뜻 {isShow ? '숨기기' : '보기'}</button>

        <button onClick={del} className="btn_del">삭제</button>

      </td>

    </tr>

  )

}

toggleDone에 있는 함수 내부에 단순하게 setIsDone의 state를 활용해서 체크가 되고 말고를 브라우저에 나타냈지만 이는 새로고침을 하면 원래대로 돌아 올 수 밖에 없다. 그래서 우리는 json파일에 직접적으로 값을 변경해야한다. 따라서 우리는 fetch를 사용해서 json파일을 직접 수정 할 수있게 할 것이다. props로 받아온 값을 state에 따로 저장해야한다. word라는 변수에 변동되는 word의 값을 기본 값으로 설정하고 fetch에서 받아온 word의 값의 고유한 번호를 가지고 있는 속성인 id로 해당 단어를 찾게 된다. 이후 fetch안에 객체를 넣어야하는데 headers의 contentType은 보내는 리소스의 타입을 의미한다. 이미지나 텍스트나 여러가지의 콘텐츠가 있지만 우리는 json타입을 이용할 것이다. 그 다음으로 body는 우리가 변경할 값을 넣으면 된다. 받아온 word를 스프레드하여서 isDone의 상태를 변경할 것이다. 변경할 데이터는 json파일이기에  이에 맞게 stringify(문자열화) 해준다. 그렇다면 json파일이 실제로 변경되는 것을 볼 수 있다. DELTE는 위의 방식인 fetch를 잘이해 했다면 이를 구현하는 것에 어려움이 없다. setWord의 선택되어 있는 id가 0이기만 하면 되는 것이다.