[React] 3-1. 컴포넌트(게시글 등록)

1. 컴포넌트 작성규칙

 1) 작명시 첫글자는 대문자로
 2) 다른 컴포넌트의 외부에 작성해야한다.

 

 

2. 컴포넌트로 만들면 좋은 요소

 1) 반복적으로 출현하는 html 요소
 2) 애플리케이션의 각 페이지들
 3) 자주 변경되는 html 요소

 

=> 컴포넌트는 이거 외에는 사용하지 않는것이 좋다! 나중에 개발할때 유지보수 측면에서 너무 많은 컴포넌트를 사용하면 안좋음

 

 

※ 이전 2-1, 2-2 내용과 이어짐

 

▶ App.js

 

게시글배열은 배열데이터이고, 게시글배열변경함수는 함수데이터임.

이게 BoardInsert.js에서 매개변수로 값이 들어간다!

 

 

 

/* eslint-disable */

import './App.css';

import {useState} from 'react';

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

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

function App() {
  let 제목 = "Whale D CLASS";

  // state 문법
  let [제목2, 제목변경함수] = useState('Whale E CLASS');  

    let [게시글배열, 게시글배열변경함수] = useState(초기게시글);

  function 제목2변경() {
    제목변경함수("Whale C CLASS"); 
  }

  const 게시글삭제 = (삭제할글번호) => {
    // 1) 배열에서 삭제를 담당하는 메소드 Array.splice(인덱스위치, 삭제할숫자)

    // 2) 게시글배열에서 글번호와 일치하지 않는 게시글만 필터링하기. (filter함수 이용)
    let 필터링배열 = 게시글배열.filter((게시글) => 게시글.글번호 !== 삭제할글번호)

    게시글배열변경함수(필터링배열);
  }


  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>
      
      <BoardInsert 게시글배열={게시글배열} 게시글배열변경함수={게시글배열변경함수}/>

    </div>
  );
}

export default App;

 

 

▶ BoardInsert.js

import { useState } from "react";

export default function BoardInsert({게시글배열, 게시글배열변경함수}){

    // let 글제목;
    let [글제목, 글제목변경함수] = useState(''); // 초기값으로 빈문자열 ''
    let [글내용, 글내용변경함수] = useState('');
    let [작성자, 작성자변경함수] = useState('');
      
      // function 게시글등록(){ }
      const 게시글등록 = () => {
          // 1) 내가 입력한 값 가져오기
      
          console.log(글내용, 글제목, 작성자);
          // "" => false, "dasdsfa" => true(값이 있다면 true)
          if(!글내용 || !글제목 || !작성자) {
            alert("뭐든 입력하세요");
            return;
          }
      
          //2) 가져온 데이터를 바탕으로 게시글 객체 생성하기
          let 게시글 = {
            글번호: Math.max( ...게시글배열.map(function(게시글,인덱스){ return 게시글.글번호 })  ) +1,
            글제목 , 
            글내용 ,
            작성자 ,
            작성일 : new Date().toLocaleDateString() // 2024. 01. 15
          }
      
          // 3) 생성한 게시글 객체를 게시글 배열에 추가한 후, 게시글 배열 변경함수 호출하기 (랜더링)
          게시글배열변경함수([...게시글배열, 게시글]); 
      
          // 입력값 초기화(state 초기화)
          글제목변경함수('');
          글내용변경함수('');
          작성자변경함수('');
       }

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

            </table>
        </div>
    )
}