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

[주인장]

* Detail.js

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

import { Button } from 'react-bootstrap';

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

const Detail = () => {

  const navigate = useNavigate();   // 페이지 이동 

  const { id } = useParams();            // 매개변수 받기 

  console.log('id:' + id);

  const [book, setBook] = useState({

    id: '',

    title: '',

    author: '',

    regTime: '',

  }); // {} : 빈 객체

  useEffect(() => {

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

      method: 'GET',

    })

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

      .then((res) => {

        // 작업 수행

        console.log(res);

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

      });

  }, []);

  const deletBook = () => {

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

      method: 'DELETE', // DELETE 방식으로 전송

    })

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

      .then((res) => {

        if (res === 'OK') {      // res가 ok면

          alert(‎'삭제 성공');

          navigate('/');

        } else {

          alert(‎'삭제 실패');

        }

      });

  };

  const updateBook = () => {

    navigate('/updateForm/' + id);

  };

  return (

    <div>

      <h1>책 상세보기</h1>

      <Button variant="warning" xxonClick={updateBook}>수정</Button>{' '}

      <Button variant="danger" xxonClick={deletBook}>

        삭제

      </Button>

      <hr />

      <h3>제목 : {book.title}</h3>

      <h3>작성자 : {book.author}</h3>

      <h3>등록일 : {book.regTime}</h3>

    </div>

  );

};

export default Detail;

<결과>