📖[React] json-server, REST-API

word 뜻 보기 버튼 추가

Day.js에서, word와 관련된 부분이 길어지므로 이를 Word 컴포넌트로 분리

word.js

import { useState } from "react";

export default function Word({ word }) {
  const [isShow, setIsShow] = useState("false"); //화면에 없애고 보이게 함
  const [isDone, setIsDone] = useState(word.isDone); //다 외웠는 지 여부도 state로
  
  function toggleShow() {
    setIsShow(!isShow);
  } //바뀌도록 하는 함수
  function toggleDone() {
    setIsDone(!isDone);
  }

  return (
    <tr className={isDone ? "off" : ""}>
      <td>
        <input type="checkbox" checked={isDone} onChange={toggleDone} />
      </td>
      <td>{word.eng}</td>
      <td>{isShow && word.kor}</td>
      <td>
        <button onClick={toggleShow}> {isShow ? "숨기기" : "뜻 보기"} </button>
        <button className="btn_del"> 삭제 </button>
      </td>
    </tr>
  );
}

✔️ json.server

빠르고 쉽게 REST API를 구축해줌
공부 목적이나 프로토타입, 작은 프로젝트 등에서 사용됨

1. npm install -g json-server
2. json-server --watch 경로 --port 포트값
   예시: (json-server --watch ./src/db/data.json --port 3001)

✔️ REST API

url주소와 method로 CRUD 요청을 하는 것
CRUD: Create: POST , Read: GET, Update: PUT, Delete : DELETE