리액트 교과서 - React에서 폼 다루기

React에서 폼 다루기

class App extends React.Component {
  state = {
    title: ""
  };

  handleChange = (e) => {
    this.setState({
      title: e.target.value
    })
  };

  render() {
    const { title } = this.state;
    return (
      <div className="App">
        <input type="text" name="title" value={title} onChange={this.handleChange} />
      </div>
    );
  }
}

자바스크립트의 input, change 이벤트

• JS onInput, onChange: 예제 코드
• React: 예제 코드

React의 onChange는 모든 변경에 대해 발생하므로 DOM의 change 이벤트(http://mng.bz/lJ37)가 매번 발생하지 않고 포커스를 잃었을 때만 발생하는 것과는 차이가 있다. 예를 들어 의 경우 사용자가 입력할 때 onChange 이벤트가 발생하지 않을 수도 있고, 사용자가 탭이나 클릭으로 포커스를 잃을 때 일반적인 HTML 브라우저 이벤트로 onChange 이벤트가 발생한다. 앞에서 언급한 것처럼 React의 경우에는 onChange 이벤트가 포커스를 잃을 때뿐만 아니라 키 입력 시마다 발생한다. 반면에 React의 onInput 이벤트는 DOM의 onInput 이벤트를 감싼 것으로, 변경할 때마다 발생한다. 결론은 React의 onChange와 HTML의 onChange는 서로 다르게 동작한다는 것이다. React의 onChange 이벤트는 HTML의 onInput 이벤트와 더 비슷하고 일관성이 있다. React에서는 가급적 onChange 이벤트를 활용하고, onInput 이벤트의 네이티브 구현에 접근해야 하는 경우에만 onInput을 사용하는 것을 추천한다. React가 감싸서 만든 onChange의 동작이 일관성 있어 믿을 수 있기 때문이다.