16. Create : POST 메서드

import './App.css';
import Header from './component/Header';
import DayList from './component/DayList';
import Day from './component/Day';
import EmptyPage from './component/EmptyPage';

import {BrowserRouter, Route, Switch} from 'react-router-dom';
import createWord from './component/CreateWord';
function App() {
  return (
          // className : class는 자바스크립트 예약어이기 때문에
    <BrowserRouter>
      <div className="App">
        <Header/>
        <Switch>
          {/* 정확하게 path와 일치하는 것에 */}
          <Route exact path="/">
            <DayList/>
          </Route>
          <Route path="/day/:day">
            <Day/>
          </Route>
          <Route path="/create_word">
            <createWord/>
          </Route>
          <Route>
            <EmptyPage/>
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

import {Link} from 'react-router-dom';

export default function Header(){
    return <div className="header">
        <h1>
            <Link to="/">토익 영단어(고급)</Link>
        </h1>
        <div className="menu">
            <Link to="/create_word" className="link">단어 추가</Link>
            <a href="#" className="link">Day 추가</a>
        </div>
    </div>;
}

1. CreateWord 컴포넌트 만들기 (App.js추가, Header Link to 경로 수정)

: 단어 등록 form 만들기

+ 등록할 단어의 정보를 얻기 위해 useRef() 훅 사용 : DOM에 접근할 수 있게 해준다(스크롤 위치확인, 포커스 주는 것 등)

useRef() 만들고 태그에 연결 DOM에 접근하면 current 해당요소 value 값

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

    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"></div>
                <label>Kor</label>
                <input type="text" placeholder="컴퓨터" ref={korRef} />
            <div className="input_area"></div>
                <label>Day</label>
                <select ref={dayRef}>
                    {days.map(day=>(
                        <option key={day.id} value={day.day}>{day.day}</option>
                    ))}
                </select>
            <button>저장</button>
        </form>
    );
}

2. POST를 이용하여 words를 등록할 것인데

day, eng, kor, isDone 값을 받는다 isDone은 default false값

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"></div>
                <label>Kor</label>
                <input type="text" placeholder="컴퓨터" ref={korRef} />
            <div className="input_area"></div>
                <label>Day</label>
                <select ref={dayRef}>
                    {days.map(day=>(
                        <option key={day.id} value={day.day}>{day.day}</option>
                    ))}
                </select>
            <button>저장</button>
        </form>
    );
}

 

 

3. 생성이 완료되면 단어를 보여주는 페이지로 이동하도록 설정

{useHistory} from "react-router"

이용

 

4. 날짜 늘이기 (CreateDay 컴포넌트 생성 + App 컴포넌트 라우트 경로 설정, 헤더 Link to 경로 설정)

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){

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