리액트 - form을 통해 데이터 넘기기

(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다.

form

• 실제 서비스에서는 form을 통해 유저에게 데이터를 받고 또 해당 데이터를 서버로 옮겨주는 일이 빈번하다. 이와 같은 부분을 공부하고자 한다.

# pages/about.jsx
import React from 'react';

class About extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }

  myChangeHandler = evt => {
    this.setState({ username: evt.target.value });
  };

  doSave = () => {
    const { username } = this.state;
    alert(username);
  };

  render() {
    return (
      <div>
        <p>Enter yout name:</p>
        <input type="text" onChange={this.myChangeHandler} />
        <button type="button" className="btn btn-primary" onClick={this.doSave}>
          저장
        </button>
      </div>
    );
  }
}
export default About;

• 사용자가 키워드를 입력하는 순간에 setState 메소드를 호출해주면서 state의 username에 사용자가 입력한 값을 넣어준다.

정리하자면 onChange로 해서 불러주고 state에 값을 넣어서 구성을 해주는 것이다.

테이블 활용

• 실제 서버에서 데이터를 받아왔다는 것을 가정하기 위해 배열과 테이블을 활용하기로 한다.

import React from 'react';

class Row extends React.Component {
  render() {
    const { name, email } = this.props;
    return (
      <tr>
        <td>{name}</td>
        <td>{email}</td>
      </tr>
    );
  }
}

class About extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }

  myChangeHandler = evt => {
    this.setState({ username: evt.target.value });
  };

  doSave = () => {
    const { username } = this.state;
    alert(username);
  };

  render() {
    const data = [
      { name: 'A', email: 'a' },
      { name: 'B', email: 'b' },
      { name: 'C', email: 'c' },
    ]; // 서버에서 데이터를 가져왔다고 가정
    const rows = data.map(row => <Row name={row.name} email={row.email} />);

    return (
      <div>
        <p>Enter yout name:</p>
        <input type="text" onChange={this.myChangeHandler} />
        <button type="button" className="btn btn-primary" onClick={this.doSave}>
          저장
        </button>

        <table className="table table-bordered">
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
            </tr>
          </thead>
          <tbody>{rows}</tbody>
        </table>
      </div>
    );
  }
}
export default About;

• Row 클래스에서는 props로 name과 email을 전달할 수 있게 구성.

• rows 에서는 map을 통해 data 배열을 3번 돌면서 Row라는 클래스 컴포넌트를 3번 호출하며 props 값들을 전달.

• 리턴값들을 rows에 다시 담아서 테이블에서 출력.

응용

• 위 form에서 name, email을 입력 받으면 아래 표에 채워지게 진행해보자.