4.2.2.2 state에 input 값 담기

이번에는 3장에서 배운 state에 input 값을 담아 보겠습니다.

3장에서 배운 대로 생성자 메서드인 constructor에서 state 초깃값을 설정하고, 이벤트 핸들링 함수 내부에서 this.setState 메서드를 호출하여 state를 업데이트해 봅시다.

그다음에는 input의 value 값을 state에 있는 값으로 설정하세요.

EventPractice.js

import React, { Component } from 'react';
 
class EventPractice extends Component {
 
  state = {
    message: ''
  }
 
  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해 보세요"
          value={this.state.message}
          onChange={
            (e) => {
              this.setState({
                message: e.target.value
              })
            }
          }
        />
      </div>
    );
  }
}
 
export default EventPractice;

---

 

코드를 저장하고, 인풋에 아무것이나 입력해 보세요. 오류를 발생시키지 않고 제대로 입력할 수 있다면 state에 텍스트를 잘 담은 것입니다.