4.2.2.3 버튼을 누를 때 comment 값을 공백으로 설정

    정말로 우리가 입력한 값이 state에 잘 들어갔는지, 그리고 인풋에서 그 값을 제대로 반영하는지 한번 검증해 보겠습니다. input 요소 코드 아래쪽에 button을 하나 만들고, 클릭 이벤트가 발생하면 현재 comment 값을 메시지 박스로 띄운 후 comment 값을 공백으로 설정하겠습니다.

    EventPractice.js

    import React, { Component } from 'react';
     
    class EventPractice extends Component {
     
      state = {
        message: ''
      }
     
      render() {
        return (
          <div>
            <h1>이벤트 연습</h1>
            <input
              (...)
            />
            <button onClick={
              () => {
                alert(this.state.message);
                this.setState({
                  message: ''
                });
              }
            }>확인</button>
          </div>
        );
      }
    }
     
    export default EventPractice;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.