#11 json-server, REST API

[뜻보기 / 숨기기 / 삭제] 버튼 / 체크박스 만들기

각 컴포넌트별로 state를 가지고 있다

→ 뜻 보기 버튼을 누르면 뜻이 보였다 안보였다 하는건 단어에만 해당하니까, 따로 컴포넌트 제작해주자

Word.js

import { useState } from "react";

export default function Word({ word }) {
  const [isShow, setIsShow] = useState(false);
  return (
  <tr>
    <td><input type="checkbox" /></td>
    <td>{word.eng}</td>
    <td>{isShow && word.kor}</td>
    <td>
      <button>뜻 보기</button>
      <button className="btn_del">삭제</button>
    </td>
  </tr>
  );
}

isShow 상태값 만들어주고, props로 word를 받아와 isShow가 true일때만 단어뜻을 보여준다

Day.js

import dummy from "../db/data.json";
import { useParams } from "react-router-dom";
import Word from './Word';

export default function Day() {
  // dummy.words 사용
  const day = useParams().day;
  //const { day } = useParams();
  const wordList = dummy.words.filter(word => (word.day === Number(day)));

  return (
    <>
      <h2>Day {day}</h2>
      <table>
        <tbody>
          {wordList.map(word => (
           <Word word={word} key={word.id} />
          ))}
        </tbody>
      </table>
    </>
  );
}

Word 컴포넌트에 word를 props로 넘겨줌

뜻보기 버튼 눌렀을때 실행될 함수 toggleShow()

import { useState } from "react";

export default function Word({ word }) {
  const [isShow, setIsShow] = useState(false);

  function toggleShow() {
    setIsShow(!isShow);
  }
  return (
  <tr>
    <td><input type="checkbox" /></td>
    <td>{word.eng}</td>
    <td>{isShow && word.kor}</td>
    <td>
      <button onClick={toggleShow}>뜻 {isShow ? '숨기기' : '보기'}</button>
      <button className="btn_del">삭제</button>
    </td>
  </tr>
  );
}

체크박스 처리

dummy data의 isDone 값 활용

→ isDone=true면 외운거니까 체크박스 표시,false면 안외운거니까 체크박스 미표시

Word.js

import { useState } from "react";

export default function Word({ word }) {
  const [isShow, setIsShow] = useState(false);
  const [isDone, setIsDone] = useState(word.isDone);

  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>
  );
}

toggleDone 함수로 체크박스 관리

isDone 이라는 state 만들어줌

isDone이 true면 체크박스 체크, false면 미체크

사용자 액션에 따라 데이터 쓰고, 읽고, 업데이트하고 삭제하기

DB구축, API 제작 → json서버를 이용해 RESTful API 만들자!

JSON서버: 빠르고 쉽게 RESTful API 구축해줌, 공부목적, 프로토타입, 작은 프로젝트에 쓸 수 있음

npm install -g json-server

json-server --watch ./src/db/data.json --port 3001

REST API

url 주소와 메서드로 CRUD 요청 하는것

Create: POST
Read: GET
Update: PUT
Delete: DELETE

→ GET 메소드로 읽은것

→ 1일치에 해당하는 목록만 가져오기

→ url와 메서드만 보고 어떤 요청인지 유추가능!