4장. 이벤트 핸들링

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

 

이벤트 사용 시 주의사항

1. 이벤트명은 카멜 표기법으로 작성

2. 실행할 자바스크립트 코드가 아닌 함수 형태의 값을 전달하는 것임.

3. DOM 요소에만 이벤트를 설정할 수 있음.

 

이벤트 종류

Clipboard / Touch / Composition / UI / Keyboard / Wheel / Focus / Media / Form / Image / Mouse / Animation / Selection / Transition

 

이벤트 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다.

-> 네이티브 이벤트와 달리 이벤트가 끝난 후 초기화되므로 정보를 참조 불가능...

∴ 비동기적으로 이벤트 객체를 참조할 일이 있으면 e.persist() 함수를 호출해 줘야 함.

 

함수가 호출될 때 this는 호출부에 따라 결정되기에, 클래스의 임의 메소드가 특정 HTML 요소의 이벤트로 등록되는 과정에서 메소드와 this의 관계가 끊겨버림.

∴ 메소드를 this와 바인딩하는 작업이 필요함.

ex.

constructor(props){
	this.handleChange = this.handleChange.bind(this);
}

근데 이렇게 계속 생성자 메소드에서 바인딩하는 거 귀찮잖슴...?

그러면 다음과 같이 babel의 transform-class-properties 문법을 사용해서 화살표 함수 형태로 메소드를 정의할 수도 있음.

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

<Skill>
객체 안에서 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용됨.

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