React 04. JSX 문법과 게시글 상세보기

Link, useNavigate, useParams.. 와 같은 함수를 사용하려면 react-router-dom이 필요하다.

해당 프로젝트폴더 안의 my-app로 이동하여 cmd:npm install react-router-dom 을 설치해준다.

 

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

export default function BoardDetail({ 게시글배열 } ) { // props로 useState의 '게시글배열'을 받아옴
// 함수 앞에 'export default'를 표기하면 'BoardDetail' 호출시 기본값으로 내보냄

    // url창에 글번호 뽑아오는 법
    // ex) http://localhost:3001/board/detail/2 => 2 추출
    const { bno } = useParams(); // '/:파라미터명' => BoardList에서 게시글.글번호 로 보낸값
    const navigate = useNavigate();	// 페이지이동함수(<a>태그와 비슷함)

    let 상세보기 = 모든데이터.게시글배열.find(function (게시글) {
        return 게시글.글번호 == bno;	
    });   // useParmas()로 가져온 bno와 게시글.글번호가 일치하는 값을 가져옴


    return (
        <> {/* React.Fragment(빈 태그) */}
            <h2>게시판상세보기</h2>
            <table className='detail-table'>
                <tr>
                    <th colSpan={4}>{상세보기.글제목}</th>
                </tr>
                <tr>
                    <th>작성자</th>
                    <td>{상세보기.작성자}</td>
                    <th>작성일</th>
                    <td>{상세보기.작성일}</td>
                </tr>
                <tr>
                    <th>글내용</th>
                    <td colSpan={3} style={{ height: "200px" }}>{상세보기.글내용}</td>
                </tr>
            </table>
            <div className='btn-area'>
                <Link to={'/board/update/' + 상세보기.글번호} >수정</Link>
                // "수정"을 누르면 /board/update/상세보기.글번호 URL로 이동시켜줌
            </div>
        </>
    )
}