이벤트 핸들링
- 대표적으로 클릭, 키보드 입력 등 사용자의 어떤 행위를 처리하는 것
이벤트를 사용할 때 주의 사항
- 이벤트 이름은 카멜 표기법을 작성 (ex : onClick, onKeyUp)
- 이벤트에 실행할 자바스크립트를 전달하는 것이 아닌 함수 형태의 값 전달
- DOM 요소에만 이벤트를 설정 (DOM 요소 : div, button, input, span 등)
React에서 이벤트 핸들링하기
<input
type = "text"
name = "message"
placeholder = "아무거나 입력해 보세요"
onChanage = {
(e) => {
console.log(e.target.value); <!-- 앞으로 변할 인풋값을 콘솔에 기록 -->
}
}
/>
class EventPractice extends Component {
state = {
message : ""
} // 초기값 설정
render() {
return (
<div>
<input
type = "text"
name = "message"
placeholder = "아무거나 입력해 보세요"
value = {this.state.message}
onChanage = {
(e) => {
this.setState({
message : e.target.value
}) <!-- state 업데이트 -->
}
}
/>
</div>
)
}
}
import {Component} from 'react';
class EventPractice extends Component {
state = {
message: ''
}
handleChange = (e) => {
this.setState({
message: e.target.value
});
}
handleClick = () => {
alert(this.state.message);
this.setState({
message: ''
})
}
render() {
return(
<div>
<input
type='text'
name='message'
placeholder='아무거나 입력해 보세요'
value={this.state.message}
onChange={this.handleChange}
/>
<button onClick={this.handleClick}>확인</button>
</div>
);
}
}
export default EventPractice;
함수 컴포넌트로 구현
import React, {useState} from 'react';
const EventPractice = () => {
const [form, setForm] = useState({
username: '',
message: ''
});
const { username, message } = form;
const onChange = e => {
const nextForm = {
...form, // 기존의 form 내용 복사
[e.target.name]: e.target.value // 원하는 값 바꾸기
};
setForm(nextForm);
};
const onClick = () => {
alert(username + ' ' + message);
setForm({
username: '',
message: ''
});
};
const onKeyPress = e => {
if (e.key === 'Enter') {
onClick();
}
};
return (
<div>
<h1>이벤트 연습</h1>
<input
type='text'
name='username'
placeholder='사용자명'
value={username}
onChange={onChange}
/>
<input
type='text'
name='message'
placeholder='아무거나 입력해 보세요'
value={message}
onChange={onChange}
onKeyPress={onKeyPress}
/>
<button onClick={onClick}>확인</button>
</div>
)
};
export default EventPractice;