[React] CRUD

1. PUT(수정)

- content-type : 보내는 resource의 타입을 의미 (html, text, json... 여러가지가 있음)

- body : 데이터 보낼 때 포함될 정보들 입력

   - ...word : 기존 데이터를 의미 isdone을 !isdone으로 바꿔줌

   - json.stringfy : json 형태로 바꿔서 보냄

- then : 응답을 받아서 응답이 ok이면 state를 바꿔줌

 

2. DELETE(삭제)

export default function Word({ word: w }) { //word: w 는 새로운 변수명으로 할당 가능해짐 
  const [word, setWord] = useState(w);
  const [isShow, setIsShow] = useState(false);
  const [isDone, setIsDone] = useState(word.isDone);

  function toggleShow() {
    setIsShow(!isShow);
  }
	//PUT 
  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);
      }
    });
  }

 //DELETE
  function del() {
    if (window.confirm("삭제 하시겠습니까?")) {
      fetch(`http://localhost:3001/words/${word.id}`, {
        method: "DELETE",
      }).then(res => {
        if (res.ok) {
          setWord({ id: 0 }); //삭제요청에 ok라 응답하면 id를 0으로 바꿈 
        }
      });
    }
  }
  
  // 삭제 요청을 하고 ok라는 응답을 받으면 다시 컴포넌트를 렌더링할 수 있게 함 -> null로 return 하면 아무것도 리턴하지 않는다는 것을 이용
  if (word.id === 0) { //word의 id가 0이면 null을 리턴하게 함
    return null;
  }

 

3. POST(생성)

import { useRef } from "react";
import { useHistory } from "react-router";
import useFetch from "../hooks/useFetch";

export default function CreateWord() {
  const days = useFetch("http://localhost:3001/days");
  const history = useHistory(); 

//POST 함수
  function onSubmit(e) {
    e.preventDefault();  //submit 버튼 눌렀을 때 새로고침되지 않도록 방지

    fetch(`http://localhost:3001/words/`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        day: dayRef.current.value, //current 속성을 이용하면 해당 요소 접근 가능하고 value는 input에 입력된 값을 가져올 수 있음
        eng: engRef.current.value,
        kor: korRef.current.value,
        isDone: false,
      }),
    }).then(res => {
      if (res.ok) {
        alert("생성이 완료 되었습니다");
        history.push(`/day/${dayRef.current.value}`); //생성된 날짜 페이지로 이동
      }
    });
  }

  const engRef = useRef(null);
  const korRef = useRef(null);
  const dayRef = useRef(null);

  return (
    <form onSubmit={onSubmit}>
      <div className="input_area">
        <label>Eng</label>
        <input type="text" placeholder="computer" ref={engRef} /> //ref를 이렇게 연결해주면 dom 요소가 생성된 후 접근 가능
      </div>
      <div className="input_area">
        <label>Kor</label>
        <input type="text" placeholder="컴퓨터" ref={korRef} />
      </div>
      <div className="input_area">
        <label>Day</label>
        <select ref={dayRef}>
          {days.map(day => (
            <option key={day.id} value={day.day}>
              {day.day}
            </option>
          ))}
        </select>
      </div>
      <button>저장</button>
    </form>
  );
}

- useRef 라는 훅은 ?

     -> dom에 접근할수 있게 해줌 (ex/ 포커스, 스크롤 위치 파악 가능)

- useHistory ?

     -> react-router에서 지원하는 것으로 원하는 페이지로 이동할 수 있도록 도와줌

     -> link to 처럼 페이지 전환할 때 유용하게 사용 가능

 

 

출처 : 코딩앙마