7. 이벤트 핸들링

이벤트(event) : 유저가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것.

 

이벤트 사용할 때 주의사항

1. 이벤트 이름은 camelCase 로 작성( 예 HTML -> onclick , 리액트 -> onClick )

2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니고, 함수 형태의 값으로 전달

3. DOM 요소에만 이벤트 설정 가능

 

이벤트 종류(그 외 : https://facebook.github.io/react/docs/events.html )

Clipboard     Form        Composition    Keyboard        Focus

Mouse       Selection          Touch            UI            Image

Wheel       Animation         Media       Transition

 

임의 메서드 생성

이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 한다.

 

1. 기본방식

2. Property Initializer Syntax를 사용한 메서드 작성

transform-class-properties : 문법을 사용하여 화살표 함수 형태로 메서드를 정의 하는 것

=> 형태로 작성하면 constructor 가 필요없다.

 

3. Input 여러 개를 핸들링

event 객체를 활용하여 e.target.name 값을 사용하면 된다.(1번 사진 참고)

 

4. onKeyPress 이벤트 핸들링

키를 눌렀을 때 발생하는 이벤트 처리 방법