[React] 게시판 만들기 (3) - 값을 입력받아서 저장하는 기능 구현

값을 입력 받아서 데이터를 추가하는 기능을 만들어 보려고 합니다.

 

 

 

 

import { render } from "@testing-library/react";
import React, { Component } from "react";

class App extends Component {
  state = {
    maxNo: 3,
    boards: [
      {
        brdno: 1,
        brdwriter: "Lee SunSin",
        brdtitle: "If you intend to live you die",
        brddate: new Date(),
      },
      {
        brdno: 2,
        brdwriter: "So SiNo",
        brdtitle: "Founder for two countries",
        brddate: new Date(),
      },
    ],
  };
  handleSaveData = (data) => {
    this.setState({
      boards: this.state.boards.concat({
        brdno: this.state.maxNo++,
        brddate: new Date(),
        ...data,
      }),
    });
  };
  render() {
    const { boards } = this.state; // {}는 state에 변수가 많을 떼 편하게 사용하는 코드

    return (
      <div>
        <BoardForm onSaveData={this.handleSaveData} />
        <table border="1">
          <tbody>
            <tr align="center">
              <td width="50">No.</td>
              <td width="300">Title</td>
              <td width="100">Name</td>
              <td width="100">Date</td>
            </tr>
            {boards.map((row) => (
              <BoardItem key={row.brdno} row={row} />
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

class BoardForm extends Component {
  //글쓰기 기능 구현

  state = {};

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.onSaveData(this.state);
    this.setState({});
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          placeholder="title"
          name="brdtitle"
          onChange={this.handleChange}
        />
        <input
          placeholder="name"
          name="brdwriter"
          onChange={this.handleChange}
        />
        <button type="submit">Save</button>
      </form>
    );
  }
}
class BoardItem extends React.Component {
  render() {
    return (
      <tr>
        <td>{this.props.row.brdno}</td>
        <td>{this.props.row.brdtitle}</td>
        <td>{this.props.row.brdwriter}</td>
        <td>{this.props.row.brddate.toLocaleDateString("ko-KR")}</td>
      </tr>
    );
  }
}
export default App;

 

(1) 먼저 BoardForm 컴포넌트를 만들고 handleChange, handleSubmit 이벤트 핸들러를 작성합니다.

handleChange는 사용자가 값을 입력할 때마다 target, 즉 입력상자의 name과 입력값을 받아옵니다.

setState() 는 컴포넌트의 state 객체에 대한 업데이트를 실행할때 사용합니다. 

 

입력상자의 name은 brdtitle. brdwriter로 지정되어 있기 때문에

 

state = {

brdtitle: 값,

brdwriter: 값

}

 

으로 저장될 것입니다.  

 

handleSubmit은 form 태그가 submit 할때 발생하는 이벤트를 처리하기 위한 핸들러입니다.

form 태그는 submit 할때 자동으로 reload되는 특성이 있습니다. 따라서 e.preventdefault로 그 이벤트를 중지시켜야 합니다. 중지시키지 않으면 페이지가 reload 되면서 입력값이 저장되지 않고 사라져 버립니다.

그리고 onSaveData를 호출하여 데이터를 저장해줍니다.

 

onSaveData는 부모인 App 컴포넌트에 있으므로 this.props를 사용합니다.

 

 

 

(2) 부모인 App 컴포넌트에서는 값을 받을 위치에 <BoardForm />을 생성해 줍니다. BoardForm을 생성하면서 handleSaveData() 함수를 onSaveData()라는 이름으로 넘겨줍니다. 이렇게 넘겨준 것을 자식 BoardForm에서 this.props.onSaveData로 호출해 주는 것입니다.

 

concat은 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환해 줍니다. 기본적으로 2개의 데이터를 가지고 있으므로 maxNo = 3으로 지정해주고 글이 추가될 경우 brdno가 1씩 증가하도록 지정해줍니다. brddate는 자바스크립트의 new Date() 함수를 활용하여 데이터 입력시의 날짜가 나타나도록 합니다.