[react] 스프링부트 프로젝트 연동하기2: 글쓰기

java

• Conroller

@CrossOrigin
	@RequestMapping(value = "/book",method = RequestMethod.POST)
	public ResponseEntity<?> book(@RequestBody Book book){
		return new ResponseEntity<>(bookService.saveBook(book),HttpStatus.CREATED);
	}

react

• view

import React, { useState } from 'react';
import { Form,Button } from "react-bootstrap";
import { useNavigate } from 'react-router-dom';
const SaveForm = () => {
    const navigate = useNavigate();
    const [book, setBook] = useState({
        title: "",
        author:""
    });
    const changeValue = (e) => { 
        setBook({ ...book, [e.target.name]: e.target.value });
    };
    const submitBook = (e) => { 
        e.preventDefault();
        fetch("<http://localhost:3333/book>", {
            method: "post",
            headers: {
                "Content-Type":"application/json;charset=utf-8"
            },
            body: JSON.stringify(book),
            
        }).then(res => {
            if (res.status == 201) {
                return res.json();
            } else {
                return null;
            }
        }).then(res => {
            if (res != null) {
                alert("저장 완료");
                navigate("/");
            } else {
                alert("저장 실패");
            }
        });
    };
    return (
        <div>
           <Form onSubmit={submitBook}>
                <Form.Group className="mb-3" controlId="formBasicEmail">
                    <Form.Label>Title</Form.Label>
                    <Form.Control type="text" placeholder="Enter Title" name ="title"onChange={changeValue} />
                </Form.Group>

                <Form.Group className="mb-3" controlId="formBasicPassword">
                    <Form.Label>Author</Form.Label>
                    <Form.Control type="text" name="author"placeholder="Enter Author"onChange={changeValue} />
                </Form.Group>
     
                <Button variant="primary" type="submit">
                    Submit
                </Button>
            </Form>
        </div>
    );
};

export default SaveForm;