(Book) 화면 구성하기- 3단계

[주인장]

* SaveForm.js

import React, { useState } from 'react';

import { Button, Form } from 'react-bootstrap';

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

const SaveForm = (props) => {

  const navigate = useNavigate();

  // 입력된 데이터를 관리하기 위해서는 state가 필요함

  const[book, setBook] = useState({

    title: '',

    author: '',

  });

  const changeVal‎ue = (e) => {

    // e.target.name : 이벤트가 발생한 form tag의 name 속성

    // e.target.value : 이벤트가 발생한 form tag의 value 속성

    setBook({

      ...book,                          // 기존의 book 객체의 내용을 그대로 가져옴

      [e.target.name]: e.target.value,  // 변경된 name과 value를 적용

    });

  };

  const submitBook = (e) => {

    // submit의 기본 이벤트 막기

    e.preventDefault(); // 새로고침 방지

    fetch('http://localhost/book', {

      method: 'POST', // POST, PUT, DELETE 사용 가능

      headers: {

        'Content-Type': 'application/json; charset=utf-8',

      },

      body: JSON.stringify(book), // JSON.stringify() : JSON 형식으로 변환

    }).then((res) => {

        console.log(res);

        if (res.status === 201) { // 201 : Created

          return res.json();

        } else {

          alert(‎'책 등록에 실패하였습니다.');

          return null;

        }

    }).then((res) => {

        console.log(res);

        if (res !== undefined) {

          alert(‎'책 등록이 완료되었습니다.');

          navigate('/');  // / 페이지로 이동

        }

    }).catch((error) => {

        console.log(error);

    });

  };  

  return (

    <Form xxonSubmit={submitBook}>

      <Form.Group className="mb-3" controlId="formBasicEmail">

        <Form.Label>제목</Form.Label>

        {/* input tag 대신 사용 - 변경된 값을 처리하기 위해 xxonChange() 사용  */}

        <Form.Control type="text" placeholder="제목을 입력하세요." xxonChange={changeVal‎ue} name='title' />        

      </Form.Group>

      <Form.Group className="mb-3" controlId="formBasicEmail">

        <Form.Label>작성자</Form.Label>

        <Form.Control type="text" placeholder="작성자를 입력하세요." xxonChange={changeVal‎ue} name='author' />        

      </Form.Group>      

      <Button variant="primary" type="submit">

        Submit

      </Button>

    </Form>

  );

};

export default SaveForm;

<결과>