리액트 이벤트 핸들링

이벤트 핸들링
리액트의 이벤트 시스템은 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷하다.

 <button onClick={() => {
            this.setState({
              number: this.state.number + 1
            })
          }
        }>더하기</button>

사용법은 일반 HTML에서 이벤트를작성하는 것과 비슷함
주의사항
이벤트 이름은 camelCase로 작성한다.
이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.
DOM 요소에만 이벤트를 설정할 수 있다.

이벤트의 종류
Clipboard
Composition
Keyboard
Focus
Form
Mouse
Selection
Touch
Wheel
Animation
Transition
등등이 있다. 참조(https://facebook.github.io/react/docs/events.html)
onChange 이벤트
onChange 이벤트는 특히 input태그와 짝을 이루어 쓰이는데 인자로 이벤트 객체를 받는다. 이 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이며 이 객체의 target의 value로 접근하면 input태그의 값에 접근할 수 있다.

<input 
   type=”text”
   name=”message”
   value={this.state.message}
   onChange={
      (e) => {
        this.setState({
          state: e.target.value
      })
     }
   }
 />

input 여러개 핸들링
input 여러 개를 다루려면 여러 메서드를 만들 수 있겠지만 event 객체를 활용하여 더 쉽게 처리할 수 있다. event.target.name값을 사용하면 된다. onChange 이벤트 핸들러에서 event,target.name은 해당 input의 name을 가리킨다.

handleChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value
  });
}

 <input 
   type=”text”
   name=”username”
   value={this.state.username}
   onChange={this.handleChange}
 />
 <input 
   type=”text”
   name=”message”
   value={this.state.message}
   onChange={this.handleChange}
  />

handleChange 내용 안에서 [] 안에 있는 값을 key 값으로 사용한다는것이 핵심이다.
리액트에서 이벤트를 다루는 것은 순수 자바스크립트와 비슷하다