react-springboot : 글 수정하기

react-springboot/book/book-frontend/src/pages/book/Detail.js

@@ -28,10 +28,16 @@ const Detail = (props) => {
       });
   };
 
+  const updateBook = () => {
+    props.history.push('/updateForm/' + id);
+  };
+
   return (
     <div>
       <h1>책 상세보기</h1>
-      <Button variant="warning">수정</Button>{' '}
+      <Button variant="warning" onClick={updateBook}>
+        수정
+      </Button>{' '}
       <Button variant="danger" onClick={deleteBook}>
         삭제
       </Button>

react-springboot/book/book-frontend/src/pages/book/UpdateForm.js

@@ -1,12 +1,83 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+
+const UpdateForm = (props) => {
+  const id = props.match.params.id;
+  const [book, setBook] = useState({
+    title: '',
+    author: '',
+  });
+
+  useEffect(() => {
+    fetch('http://localhost:8080/book/' + id)
+      .then((res) => res.json())
+      .then((res) => {
+        setBook(res);
+      });
+  }, [id]);
+
+  const changeValue = (e) => {
+    setBook({
+      ...book,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const submitBook = (e) => {
+    e.preventDefault();
+    fetch('http://localhost:8080/book/' + id, {
+      method: 'put',
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+      },
+      body: JSON.stringify(book),
+    })
+      .then((res) => {
+        return res.status === 200 ? res.json() : null;
+      })
+      .then((res) => {
+        res !== null
+          ? props.history.push('/book/' + id)
+          : alert('책 수정 실패');
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
 
-const UpdateForm = () => {
   return (
     <div>
-      <h1>책 수정하기</h1>
+      <Form onSubmit={submitBook}>
+        <Form.Group controlId="formBasicEmail">
+          <Form.Label>Title</Form.Label>
+          <Form.Control
+            type="text"
+            placeholder="Enter title"
+            onChange={changeValue}
+            name="title"
+            value={book.title}
+          />
+          <Form.Text className="text-muted"></Form.Text>
+        </Form.Group>
+
+        <Form.Group controlId="formBasicEmail">
+          <Form.Label>Author</Form.Label>
+          <Form.Control
+            type="text"
+            placeholder="Enter author"
+            onChange={changeValue}
+            name="author"
+            value={book.author}
+          />
+          <Form.Text className="text-muted"></Form.Text>
+        </Form.Group>
+
+        <Button variant="primary" type="submit">
+          Submit
+        </Button>
+      </Form>
     </div>
   );
 };
 
 export default UpdateForm;
-<h1>책 수정하기</h1>;