React 05. JSX 문법과 게시글 수정

 

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

export default function BoardUpdate({ 게시글배열, 변경된게시글배열, 상세보기, 상세보기변경함수 }) { 
// 필요한 useState만 props로 가져옴('props'로 받아와도 되지만 사용하지도 않는 데이터를 가져오면 
// 방대한 데이터를 가지게 되어 react의 장점인 랜더링 속도가 저하됨)
   
    let { bno } = useParams();  // ex){bno:1} . 수정할 게시물의 bno을 가져옴

    let [입력값, 입력값변경] = useState(상세보기); 
    const navigate = useNavigate();

    function 게시글수정() {
        // 수정완료 후 내가 작성한 게시글 상세보기 페이지로 이동시키기
        
        let { 글제목, 글내용, 작성자 } = 입력값;

        if (!글내용 || !글제목 || !작성자) {  // insert와 동일하게 제한함
            alert("전부 입력하세요");
            return;
        }

        const 변경된게시글배열 = 게시글배열.map(function (게시글) {
            if (게시글.글번호 == 입력값.글번호) return 입력값;
            return 게시글;
        })

        게시글배열변경함수([...변경된게시글배열]); 
        //state함수 : 비동기함수로 페이지의 모든 스크립트를 읽은 후 실행된다.
        
        navigate('/board/detail/' + 입력값.글번호);
        // navigate('/detail?test=test'); // <-파라미터값 전달도 가능함!
    }

    function onIputHandler(e) {
        let { name, value } = e.target;
        입력값변경({ ...입력값, [name]: value });
    }

    return (
        <>
            <h2>게시글 수정</h2>
            <table className='enroll-table'>
                <tr>
                    <th>제목</th>
                    <td colSpan={3}>
                        <input type='text' name='글제목'
                            onChange={onIputHandler}
                            value={입력값.글제목}
                        />
                    </td>
                </tr>
                <tr>
                    <th>작성자</th>
                    <td colSpan={3}>
                        <input type='text' name='작성자'
                            onChange={onIputHandler}
                            value={입력값.작성자}
                        />
                    </td>
                </tr>
                <tr>
                    <th>글내용</th>
                    <td colSpan={3} style={{ height: "200px" }}>
                        <textarea name='글내용'
                            onChange={onIputHandler}
                            value={입력값.글내용}
                        ></textarea>
                    </td>
                </tr>
                <tr>
                    <th colSpan={4}><button onClick={게시글수정}>수정</button></th>
                </tr>
            </table>
        </>

    )

}