📖[React] POST(생성), useHistory()

✔️ 필요한 data 확인

data.json

 {
      "id": 2,
      "day": 1,
      "eng": "apple",
      "kor": "사과",
      "isDone": true
    },

day, eng, kor는 입력받고 isDone을 false를 기본으로 저장할 예정

📌 POST 활용

CreateWord.js

import React from "react";
import { useRef } from "react";
import useFetch from "../hooks/useFetch";

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

  function onSubmit(e) {
    e.preventDefault();

    console.log(engRef.current.value);
    console.log(korRef.current.value);
    console.log(dayRef.current.value);

    fetch(`http://localhost:3001/words/`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        day: dayRef.current.value,
        eng: engRef.current.value,
        kor: korRef.current.value,
        isDone: false,
      }),
    }).then((res) => {
      if (res.ok) {
        alert("생성이 완료 되었습니다");
      }
    });
    
  }
  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} />
      </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>
  );
}

여기서,

function onSubmit(e) {
    e.preventDefault();

    console.log(engRef.current.value);
    console.log(korRef.current.value);
    console.log(dayRef.current.value);

    fetch(`http://localhost:3001/words/`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        day: dayRef.current.value,
        eng: engRef.current.value,
        kor: korRef.current.value,
        isDone: false,
      }),
    }).then((res) => {
      if (res.ok) {
        alert("생성이 완료 되었습니다");
      }
    });
    
  }
  const engRef = useRef(null);
  const korRef = useRef(null);
  const dayRef = useRef(null);

전달할 body에 각 전달 값을 넣어줌

생성 완료 후에 해당하는 페이지로 이동

📌 useHistory()

useHistory()는 react-router에서 제공하는 기능
const history= useHistory();
history.push(원하는 이동 url);
useHistory()로 설정한 history에 주소를 push하면 해당 페이지로 이동

CreateWord.js

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

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

  function onSubmit(e) {
    e.preventDefault();

    fetch(`http://localhost:3001/words/`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        day: dayRef.current.value,
        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} />
      </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>
  );
}

📌 같은 방식으로 날짜 생성 page 생성

App.js와 Header.js 에서 router 및 버튼 연결

CreateDay.js

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

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

  function addDay(e) {
    e.preventDefault();

    fetch(`http://localhost:3001/days/`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        day: days.length + 1,
      }),
    }).then((res) => {
      if (res.ok) {
        alert("생성이 완료 되었습니다");
        history.push(`/`);
      }
    });
  }

  return (
    <div>
      <h3> 현재 일수 : {days.length}일</h3>
      <button onClick={addDay}> Day 추가 </button>
    </div>
  );
}