[React] 2-2. 게시판 등록

1. 게시글 등록

▶ 게시글 등록 작업순서
   1) 내가 입력한 값 가져오기
   2) 가져온 데이터를 바탕으로 게시글 객체 생성하기
   3) 생성한 게시글 객체를 게시글배열에 추가한 후, 게시글배열변경함수 호출하기(랜더링)

 

1) 내가 입력한 값 가져오기

 - js 방식 : document.querySelector(선택자).value
 - react방식 : state(글제목, 글내용, 작성자)

 

 

2) 가져온 데이터를 바탕으로 게시글 객체 생성하기

//2) 가져온 데이터를 바탕으로 게시글 객체 생성하기 let 게시글 = {      //글번호는 게시글 배열에서 고유해야 함 ,      // 게시글 배열에서 가장 큰 글번호값을 찾은 후 +1해서 반환해줄 예정     글번호: Math.max( ...게시글배열.map(function(게시글,인덱스){ return 게시글.글번호 })  ) +1,      //map함수를 이용해서 반복문을 돌리며 게시글의 글번호를 배열 형태로 반환 [1,2,3,4,5,6,7,8,9,10]     글제목 , // key,value값에 들어가는 변수명이 동일한 경우 속성명 단축구문을 제공     글내용 ,     작성자 ,     작성일 : new Date().toLocaleDateString() // 2024. 01. 15 }

 

3) 생성한 게시글 객체를 게시글배열에 추가한 후, 게시글배열변경함수 호출하기(랜더링)

 

 

 

▶ App.js 전체코드

/* eslint-disable */

import './App.css';

import {useState} from 'react';

import 초기게시글 from './data'; // default옵션으로 export한 경우 변수명을 다르게 가져올 수 있음

import {a,b,c} from './data';

function App() {
  // let 글제목;
  let [글제목, 글제목변경함수] = useState(''); // 초기값으로 빈문자열 ''
  let [글내용, 글내용변경함수] = useState('');
  let [작성자, 작성자변경함수] = useState('');

// function 게시글등록(){ }
const 게시글등록 = () => {
    // 1) 내가 입력한 값 가져오기
    // js방식 : document.querySelector(선택자).value
    // react 방식 : state(글제목,글내용,작성자)

    //2) 가져온 데이터를 바탕으로 게시글 객체 생성하기
    let 게시글 = {
      //글번호는 게시글 배열에서 고유해야 함 , 게시글 배열에서 가장 큰 글번호값을 찾은 후 +1해서 반환해줄 예정
      글번호: Math.max( ...게시글배열.map(function(게시글,인덱스){ return 게시글.글번호 })  ) +1,
            //map함수를 이용해서 반복문을 돌리며 게시글의 글번호를 배열 형태로 반환 [1,2,3,4,5,6,7,8,9,10]
      글제목 , // key,value값에 들어가는 변수명이 동일한 경우 속성명 단축구문을 제공
      글내용 ,
      작성자 ,
      작성일 : new Date().toLocaleDateString() // 2024. 01. 15
    }
    
    // 3) 생성한 게시글 객체를 게시글 배열에 추가한 후, 게시글 배열 변경함수 호출하기 (랜더링)
    게시글배열.push(게시글);
    // 게시글배열변경함수(게시글배열); // 이렇게하면 주소값을 넣는것이어서 안됨
    게시글배열변경함수([...게시글배열]); // 전개되면 배열이 아니기 때문에 [] 를 넣어주는 것
 }

  return (
    <div className="App">

      <div className="header">
        <h3 style={ { fontWeight : "bolder" } }>{제목2}</h3>
      </div>
      <div className='nav'>

        <button onClick={제목2변경}>제목변경테스트</button>
        <button>게시판</button>
        <button>등록</button>
      </div>
      <div className='outer'>
        <br />
        <h2>일반게시판</h2>
        <table className='list-table'>
          <thead>
            <tr>
              <th style={ {width: "10%"} }>번호</th>
              <th style={ {width: "40%"} }>제목</th>
              <th style={ {width: "20%"} }>작성자</th>
              <th style={ {width: "20%"} }>작성일</th>
              <th style={ {width: "10%"} }>삭제</th>
            </tr>
          </thead>
          <tbody>
            {/*
              Array내부의 map함수 사용 예제
              [1,2,3].map(function () {return 1}) ==> [1,1,1]
            */

              게시글배열.map(function(게시글, 인덱스) {
                return (
                  <tr key={인덱스}>
                    <td>{게시글.글번호}</td>
                    <td>{게시글.글제목}</td>
                    <td>{게시글.작성자}</td>
                    <td>{게시글.작성일}</td>
                    <td><button onClick={() => {게시글삭제(게시글.글번호)}}>삭제</button></td>
                  </tr> 
                  )
              })
            }

          </tbody>
        </table>
      </div>

      <div className='outer'>
        <br/><h2>등록</h2>
        <table className='enroll-table'>
            <tr>
              <th>제목</th>
              <td colSpan={3}>
                <input type='text' name='글제목' 
                onChange={ function(e){ //input태그에 들어있는 값이 바뀔 때 실행됨
                  글제목변경함수(e.target.value) // 현재 이벤트가 발생한 객체의 value값
                }} 
                />
              </td>
            </tr>
            <tr>
              <th>작성자</th>
              <td colSpan={3}>
                <input type='text' name='작성자' 
                onChange={ function(e){ //input태그에 들어있는 값이 바뀔 때 실행됨
                  작성자변경함수(e.target.value) // 현재 이벤트가 발생한 객체의 value값
                }} 
                />
              </td>
            </tr>
            <tr>
              <th>글내용</th>
              <td colSpan={3} style={{height : "200px"} }>
                <textarea name='글내용'
                 onChange={ function(e){ //input태그에 들어있는 값이 바뀔 때 실행됨
                  글내용변경함수(e.target.value) // 현재 이벤트가 발생한 객체의 value값
                }} 
                ></textarea>
              </td>
            </tr>
            <tr>
              <th colSpan={4}><button onClick={ 게시글등록 }>등록</button></th>
            </tr>

        </table>
      </div>
    </div>
  );
}

export default App;

 

 

=> 등록이 되는 것을 확인

 

※ 하지만 문제점이 있다! 빈값을 입력하던, 내가 입력했던 값이 그대로 남아있어 등록만 계속 클릭하면 값은 내용이 들어가는 문제점이 발생한다! 빈값이 들어가는 문제도 발생

 

이문제를 해결하기 위해 if문을 이용해서 false , true 반환해줄것!

 

▶ 빈값이 들어갈시 게시글 등록이 안되고, 등록이 되면 모든 칸은 모두 빈칸으로 다시 되돌림

입력값을 초기화 시키기 위해서 글제목변경함수("); 글내용변경함수("); 작성자변경함수(");를 하고 value={작성자}; 값을 가져와서 각각 작성자의 값을 가져오도록 함

// let 글제목;   let [글제목, 글제목변경함수] = useState(''); // 초기값으로 빈문자열 ''   let [글내용, 글내용변경함수] = useState('');   let [작성자, 작성자변경함수] = useState(''); const 게시글등록 = () => {     console.log(글내용, 글제목, 작성자);     // "" => false, "dasdsfa" => true(값이 있다면 true)     if(!글내용 || !글제목 || !작성자) {       alert("뭐든 입력하세요");       return;     }     //2) 가져온 데이터를 바탕으로 게시글 객체 생성하기     let 게시글 = {       //글번호는 게시글 배열에서 고유해야 함 , 게시글 배열에서 가장 큰 글번호값을 찾은 후 +1해서 반환해줄 예정       글번호: Math.max( ...게시글배열.map(function(게시글,인덱스){ return 게시글.글번호 })  ) +1,             //map함수를 이용해서 반복문을 돌리며 게시글의 글번호를 배열 형태로 반환 [1,2,3,4,5,6,7,8,9,10]       글제목 , // key,value값에 들어가는 변수명이 동일한 경우 속성명 단축구문을 제공       글내용 ,       작성자 ,       작성일 : new Date().toLocaleDateString() // 2024. 01. 15     }     // 3) 생성한 게시글 객체를 게시글 배열에 추가한 후, 게시글 배열 변경함수 호출하기 (랜더링)     // 게시글배열변경함수(게시글배열); // 이렇게하면 주소값을 넣는것이어서 안됨     게시글배열변경함수([...게시글배열, 게시글]); // 전개되면 배열이 아니기 때문에 [] 를 넣어주는 것     // 입력값 초기화(state 초기화)     글제목변경함수('');     글내용변경함수('');     작성자변경함수('');  }

 

 

☞ value={} 추가하여 등록하고 난뒤 다시 빈칸으로 되돌림