리액트 23강

이 경로에 저 페이지가 있다는 뜻

요렇게

get메소드- 단순히 서버에서 데이터를 가지고 오는 것
포스트메소드- api서버에 새로운 게시물을 등록해주는 것, 보내주는 것

import { useRef, useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";

export default function CreateItem() {

    const [values, setValues] = useState({ //화면에 글씨치면 나오게해주는애
        task: "", due: ""
    });

    const handleChange = (event) => {
        const { name, value } = event.target;
        setValues({
            ...values,
            [name]: value
        });
    };

    const navigate = useNavigate();
    const ref = useRef(); //포커스를 첫번째 input에 맞춰주는 애

    useEffect(() => {
        ref.current.focus();
    })

    const onSubmit = (event) => {
        event.preventDefault(); //오타조심...

        fetch("http://localhost:3001/items", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                 task: values.task, 
                 due: values.due, 
                 status: "todo" 
                }),
        }).then((res) => {
            if (res.ok) {
                alert("Create new item!");
                navigate("/todo");
            }
        });
    };

    return (<form onSubmit={onSubmit}>
        <div className="input_area">
            <p>Task</p>
            <input type="text" name="task" value={values.task} onChange={handleChange} ref={ref}/>
            <p>Due</p>
            <input type="text" name="due" value={values.due} onChange={handleChange} />
        </div>
        <button>Create</button>
    </form>
    );
}

Createitem

영어오타는 정말 조심해야겠다는 깨달음을 얻었다...