React 03. JSX 문법과 게시글 등록

** 게시글 등록 **
// 지난시간 게시글 데이터를 활용했다.

import './App.css';
import { useState } from 'react';
import data from './data';

function App() {
 	
    let [게시글배열, 게시글배열변경함수] = useState(data);

    //let [글번호, 글변경함수] = useState('');
    //let [글제목, 글제목함수] = useState('');
    //let [글내용, 글내용함수] = useState(''); // state 초기값 설정
    let [입력값, 입력값변경함수] = useState({  // 위 3줄을 하나로 받도록 한다.
    	글번호 : "",
        글제목 : "",
        글내용 : ""
    })
    
    
    function 게시글등록() {
    	/*
          * 게시글 등록 작업순서
          1. 내가 입력한 값 가져오기
          2. 가져온 데이터를 바탕으로 게시글 객체 생성
          3. 생성한 게시글객체를 게시글 배열에 추가한 후 게시글배열변경함수 호출(랜더링)
	*/  
     	
        let { 글내용, 글제목, 작성자 } = 입력값; // 입력받은 값을 구조분해할당으로 넣어줬다.
        if (!글내용 || !글제목 || !작성자) {  // 공백도 작성이 가능하므로 이와같이 제한함
                alert("전부 입력하세요");
                return;
        }

        // 2. 가져온 데이터를 바탕으로 게시글 객체 생성
        let 게시글 = {
            // 글번호는 게시글배열에서 고유해야 한다. 
            // 게시글배열에서 가장 큰 글번호값을 찾은 후 +1 해서 반환해주기
            글번호: Math.max(...게시글배열.map(function (게시글, 인덱스) { // 위에서 구조분해할당으로 받은 값을 넣어준다
                return 게시글.글번호 })) + 1, ...입력값 , // <- ...입력값 == (글내용:value, 글제목:value, 작성자:value)
            작성일: new Date().toLocaleDateString() // => 2024. 01. 15
        }
        
        // 3. 생성한 게시글객체를 게시글 배열에 추가한 후 게시글배열변경함수 호출(랜더링)
        //게시글배열.push(게시글);
        // 게시글배열변경함수(게시글배열);   // => 주소값 비교로 랜더링 안됨!
        게시글배열변경함수([...게시글배열, 게시글] ); // 배열형태의 데이터 뒤에 입력한 게시글을 넣어준다 

        // 입력값 초기화작업(state초기화)
        //글제목변경함수('');
        //글내용변경함수('');
        //작성자변경함수('');
        입력값변경({		// // 위 3줄을 비구조화할당 문법으로 state값을 변경해준다.
            글제목: "",
            글내용: "",
            작성자: ""
        })
        
    }  
        
       /* 1. 내가 입력한 값 가져오기
          js방식 : document.querySelector(선택자).value
          react방식 : state(글제목, 글내용, 작성자) -> input에 onChange함수를 사용한다.
     */	
        function onIputHandler(e) { // onChange함수를 통해 입력받은 값을 가져올 함수
            let { name, value } = e.target;  // 해당 함수를 호출한 input의 name값과 value값을 구조분해할당하여 저장
            입력값변경({ ...입력값, [name]: value }); // 입력값이 없다면 [name]: value 형태로 넣어 입력값을 변경 해준다.
        }
    
    
    return (
        <div className="App">
            <div className='outer'>
                <br />
                <h2>게시글 등록</h2>
                <table className='enroll-table'>
                    <tr>
                        <th>글제목</th>
                        <td colSpan={3}>
                            <input type="text" name="글제목" 
                            	onChange={onIputHandler} // onIputHandler함수를 통해 입력값을 보낼예정
                                value={입력값.글제목} />
                        </td>
                    </tr>
                    <tr>
                        <th>작성자</th>
                        <td colSpan={3}>
                            <input type="text" name="작성자"
                            	onChange={onIputHandler} // onIputHandler함수를 통해 입력값을 보낼예정
                                value={입력값.작성자} />
                        </td>
                    </tr>
                    <tr>
                        <th>글내용</th>
                        <td colSpan={3} style={{ height: "200px" }}>
                            <textarea name="글내용" 
                            	onChange={onIputHandler} // onIputHandler함수를 통해 입력값을 보낼예정
                                value={입력값.글내용} ></textarea>
                        </td>
                    </tr>
                    <tr>
                        <th colSpan={4}><button onClick={게시글등록}>등록</button></th>
                    </tr>
                </table>
            </div>
        </div>
    );
}

export default App;