[React] 리액트 클래스형 컴포넌트 setState 사용하기

🎯 클래스형 컴포넌트 setState 사용하기

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

class InputUserData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "홍길동",
      job: "developer"
    };
  }

  //name 데이터를 변경하는 메소드
  onNameHandler = event => {
    //setState를 사용해 name 데이터 업데이트 기능을 구현
    this.setState({
        name: event.target.value;
    })

  };

  //job 데이터를 변경하는 메소드
  onJobHandler = event => {
    //setState를 사용해 job 데이터 업데이트 기능을 구현
    this.setState({
        job: event.target.value;
    })
  };


  onClickEventHandler = () => {
    alert("이름: " + this.state.name + ", 직업: " + this.state.job);
  };

  render() {
    const { name, job } = this.state;
    return (
      <div>
        <div>
          name: <input type="text" value={name} onChange={this.onNameHandler} />
        </div>
        <div>
          job: <input type="text" value={job} onChange={this.onJobHandler} />
        </div>
        <button type="button" onClick={this.onClickEventHandler}>
          저장
        </button>
      </div>
    );
  }
}

ReactDOM.render(<InputUserData/>, document.getElementById('root'));

serviceWorker.unregister();