이벤트 핸들링

이벤트헨들링 주의사항

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

2. 이벤트에 실행할 자바스크립트 코드 전달이 아니라 함수 형태의 값을 전달

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

 

 

class EventPractice extends Component {

render() {

return (

<div>

<h1>이벤트 연습</h1>

<input

type="text"

name="message"

placeholder="아무거나 입력해 보세요"

onChange= {

(e) => {

console.log(e)

}

}

/>

</div>

)

}

}

콘솔에 기록되는 e 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다.

네이티브 이벤트와 인터페이스가 같으므로 순수 자바스크립트에서 HTML 이벤트를 다룰 때와 똑같이 사용하면 된다

SyntheticEvent는 네이티브 이벤트와 달리 이벤트가 끝나면 이벤트 초기화 하므로 참조할 수 없다

만약 비동기적으로 이벤트 객체를 참조할 일이 있다면 e.persist()함수를 호출

예를 들어 onChange 이벤트가 발생 할 때, 앞으로 변할 e.target.value 콘솔에 기록

 

import React, { Component } from 'react'

 

class EventPractice extends Component {

state = {

message: ''

}

render() {

return (

<div>

<h1>이벤트 연습</h1>

<input

type="text"

name="message"

placeholder="아무거나 입력해 보세요"

value={this.state.message}

onChange= {

(e) => {

this.setState({

message: e.target.value

})

}

}

/>

<button onClick= {

() => {

alert(this.state.message);

this.setState({

message: ''

});

}

}>확인</button>

</div>

)

}

}

 

export default EventPractice

 

함수형 컴포넌트