[React] Blog_01. 게시글 상세보기

public interface BoardJPARepository extends JpaRepository<Board, Integer> {

    @Query("""
            SELECT b
            FROM Board b
            JOIN FETCH b.user u
            LEFT JOIN FETCH b.replies r
            WHERE b.id = :id
            """)
    Optional<Board> findByIdJoinUser(@Param("id") int id);
}

게시물 상세보기

page>Detail.js

import React from "react";
import { Button } from "react-bootstrap";
import { Link } from "react-router-dom";

const Detail = (props) => {
  function fetchDelete(postId) {}

  return (
    <div>
      <Link to={"/updateForm/1"} className="btn btn-warning">수정</Link>
      <Button className="btn btn-danger" onClick={() => fetchDelete(1)}>삭제</Button>
      <br />
      <br />
      <h1>제목1</h1>
      <hr />
      <div>내용1</div>
    </div>
  );
};

export default Detail;

〃
const [post, setPost] = useState ({
    id      : undefined,
    title   : "",
    content : "",
    userId  : undefined,
    owner   : false,
    replies : [],
});
〃