⚛️Start! React : section15 - POST,CREATE구현

이번 시간에는 Header부분에 있는 단어 추가하기와 Day추가하기를 구현해 볼 것이다. 포스팅에 앞서 이전 시간에 우리는 fetch를 활용해서 계속해서 개발을 해왔다. 그만큼 API의 중요성을 느꼈을 것이며 이에 다른 custom Hook을 만들었다는 것을 잊지 말아야한다. 더 나아가 Js와 React의 차이가 무엇인지 생각해보면 좋을 듯하다. 이번에 생성할 컴포넌트들을 Route해야하기 때문에 App.js에서 Route를 설정해주자.

ClassApp.js

import Day from "./component/Day";

import DayList from "./component/DayList";

import Header from "./component/Header";

import EmptyPage from "./component/EmptyPage"

import CreateWord from "./component/CreateWord"

import CreateDay from "./component/CreateDay"

import { BrowserRouter, Route, Routes } from 'react-router-dom'

function ClassApp() {

  return (

    <BrowserRouter>

      <div className="App">

        <Header></Header>

        <Routes>

          <Route exact path="/" element={<DayList />}></Route>

          <Route path="/day/:day" element={<Day />}></Route>

          <Route path="*" element={<EmptyPage />} />

          <Route path="/create_word" element={<CreateWord></CreateWord>}></Route>

          <Route path="/create_day" element={<CreateDay></CreateDay>}></Route>

        </Routes>

      </div>

    </BrowserRouter>

  );

}

export default ClassApp;

createWord컴포넌트를 살펴보자

* createWord.js

import { useRef } from "react";

import useFetch from "../Hooks/useFetch"

import { useNavigate } from "react-router-dom";

export default function CreateWord() {

  const days = useFetch("http://localhost:3001/days");

  const navigate = useNavigate();

  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("성생어 완료 되었습니다.")

        navigate(`/day/${dayRef.current.value}`)

      }

    })

  }

  const engRef = useRef(null); //Dom에 접근할 수 있도록한다.

  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}></input>

      </div>

      <div className="input_area">

        <label>Kor</label>

        <input type="text" placeholder="컴퓨터" ref={korRef}></input>

      </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>

  )

}

여기서 주의 깊게 보아야하는 것은 fetch와 useRef, useNavigate이다. coustom Hook을 사용하지 않고 fetch를 이용해서 PUT이 아닌 POST를 이용했다. 이에 json에 전달할 구체적인 값을 body에 설정해준다. 보통 js라면 document를 사용해서 입력받은 값을 전달하지만 여기서는 useRef라는 Hook을 사용해서 현재 입력된 정보를 가져온다. 그렇게 전달 받은 값은 json파일에 맞춰서 API를 통해 각 해당되는 객체에 값을 전달하고 전달이 완료되면 navigate를 통해 원하는 페이지로 이동을 한다. navigate를 사용하기 위해서 form태그의 submit이 되었을 때 자동 새로고침을 막기위해 e.preventDefault를 해주어야한다. createDay컴포넌트를 살펴보자.

createDay.js

import { useNavigate } from "react-router-dom";

import useFetch from "../Hooks/useFetch"

export default function CreateDay() {

  const days = useFetch("http://localhost:3001/days")

  const navigate = useNavigate();

  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("성생어 완료 되었습니다.")

        navigate(`/`)

      }

    })

  }

  return (

    <div>

      <h3>현재 일수 : {days.length} </h3>

      <button onClick={addDay}>Day 추가</button>

    </div>

  )

}

day를 생성하는 페이지이기에 현재  days의 전체 길이를 보여주고 이를 추가해주기만 하면된다. fetch는 POST형식으로 createWord 컴포넌트와 다를게 없다. 크게 어려움은 없는 부분이다. 지금까지 살펴보면 클릭을 하고 해당 페이지를 Route 관리를 해주는 부분에서 잘 구성만 한다면 별 어려움 없이 없다는 것을 알 수 있다. 다시 강의를 살펴본다면 클릭과 페이지간의 이동을 유심히 보면 좋을 듯하다.