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

[주인장]

* UpdateForm.js

import React, { useEffect, useState } from 'react';

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

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

const UpdateForm = (props) => {

  const navigate = useNavigate();

  const { id } = useParams();

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

  const [book, setBook] = useState({

    title: '',

    author: '',

  });

  useEffect(() => {

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

      method: 'GET',

    })

      .then((res) => res.json()) // 결과를 json으로 변환후 반환

      .then((res) => {

        // 작업 수행

        console.log(res);

        setBook(res); // res를 books에 담음

      });

  }, []);

  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/' + id, {

      method: 'PUT', // 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 === 200) {         

          return res.json();

        } else {

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

          return null;

        }

      })

      .then((res) => {

        console.log(res);

        if (res !== undefined) {

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

          navigate('/book/'+ id); // / 페이지로 이동

        }

      })

      .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"

          value={book.title}

        />

      </Form.Group>

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

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

        <Form.Control

          type="text"

          placeholder="작성자를 입력하세요."

          xxonChange={changeVal‎ue}

          name="author"

          value={book.author}

        />

      </Form.Group>

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

        Submit

      </Button>

    </Form>

  );

};

export default UpdateForm;

<결과>