React event system

사용법은 일반 HTML 에서 이벤트를 작성하는 것과 유사하지만, 주의해야할 사항 몇가지가 있다.

 

1. 이벤트 이름은 camelCase
2. 이벤트에 실행할 jscode 가 아닌 함수 형태의 값을 전달한다.
   -> HTML에서 이벤트를 설정하는 경우에는 큰따움표 안에 실행할 코드를 넣지만, 리액트에서는 함수 형태의 객체를 전달한다.
   ex) <button onCLick{() ->{this.set....}>..
3. DOM 요소에만 이벤트를 설정할 수 있다.
   -> 즉  div, button, input , form, span 등 DOM 요소에는 이벤트를 설정할 수 있지만 직접만든 컴포넌트에는 이벤트를 설정할 수 없다. 예를 들어 <MyComponent onClick={doSomething} 의 경우 doSomething 함수를 설정하는 것이 아니라 그냥 이름이 onClick인 props를 전달할 뿐이다.

 

또 하나 주의해야할 점

이벤트를 함수형태로 설정하는데 컴포넌트에 임의 메소드를 만드는 경우 기본적으로 this 에 접근할 수 없다. 따라서 컴포넌트의 생성자 메서드인 constructor 에서 각 메서드를 this 와 바인딩 해주어야 한다.