이벤트란 대표적으로 클릭, 키보드 입력 등 사용자의 어떤 행위를 의미
이러한 이벤트를 처리하는 것을 이벤트 핸들링
⚡ 이벤트를 사용할 때 주의 해야 할 점
- 이벤트 이름은 카멜 표기법으로 작성 ex) onclik → onClick , onkeyup → onKeyUp
- 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 HTML에서 이벤트를 설정할 때는 큰 따옴표 안에 실행할 코드를 넣었지만 리액트에서는 함수 형태의 객체로 전달
- DOM 요소에만 이벤트를 설정할 수 있다. div, button, input 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다.
이벤트 종류
리액트에서 지원하는 이벤트 종류는 다음과 같습니다.
- Clipboard
- Composition
- Keyboard
- Focus
- Form
- Mouse
- Selection
- Touch
- UI
- Wheel
- Media
- Image
- Animation
- Transition
등이 존재한다.
핸들링 순서
- 컴포넌트 생성 및 불러오기
- onChange 이벤트 핸들링하기
- 임의 메서드 만들기
- input 여러 개 다루기
- onKeyPress 이벤트 핸들링하기
컴포넌트 생성
import React, { Component } from 'react';
class EventPractice extends Component {
render() {
return (
<div>
<h1>이벤트 연습</h1>
</div>
);
}
}기본 적으로 간단한 클래스 컴포넌트를 구현
onChange 이벤트 핸들링
import React, { Component } from 'react';
class EventPractice extends Component {
render() {
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력해 보세요"
onChange={
(e) => {
console.log(e);
}
}
/>
</div>
);
}
}onChange 안에 있는 e 객체는 SysntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이며 이벤트가 끝나고 나면 이벤트가 초기화되므로 정보를 참조할 수 없습니다.
ex) 0.5뒤에 e 객체를 참조하면 e 객체 내부의 모든 값이 비워진다.
만약 비동기 적으로 이벤트 객체를 참조할 일이 있다면 e.persist()를 이용
onChange={ (e) => { console.log(e.target.value); } }onChange 코드 부분을 해당 방식으로 바꾼다면 input에 입력될 때마다 console에 입력 값이 찍히는 것을 볼 수 있다.
State와 input
mport 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
})
}
}
/>
</div>
);
}
}
export default EventPracticeinput에 있는 값들이 state에 텍스트를 담는 것을 볼 수 있다.
임의 메서드 만들기
현재 jsx안에 함수를 쓰니 가독성이 매우 떨어진다 그래서 밖에서 함수 형태로 만들어서 전달하는 방법을 사용한다.
import React, { Component } from 'react';
class EventPractice extends Component {
state = {
message: ''
}
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleChange(e) {
this.setState({
message: e.target.value
});
}
handleClick() {
alert(this.state.message);
this.setState({
message: ''
});
}
render() {
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력해 보세요"
value={this.state.message}
onChange={this.handleChange}
/>
<button onClick={this.handleClick}>확인</button>
</div>
);
}
}현재 일반 함수 형태를 사용했을 시 함수 내부에서 영향을 미치기 때문에 custructor을 이용해서 jsx 사용할 문법에 입혀야 한다. 하지만 화살표 함수를 사용했을 때는 인스턴스에게 영향을 끼치기 때문에 화살표 함수를 사용하면 custructor을 이용하지 않고 더욱 가독성있는 코드를 작성할 수 있다.
import React, { 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>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력해 보세요"
value={this.state.message}
onChange={this.handleChange}
/>
<button onClick={this.handleClick}>확인</button>
</div>
);
}
}
export default EventPractice
onKeyPress 이벤트 핸들링
이전 것과 똑같다 해당 함수를 만들어서 input과 같은 속성에 넣으면 결과적으로 가능하다.
handleKeyPress = (e) => {
if(e.key === 'Enter') {
this.handleClick();
}
}
//------------------------------------------------------------------------------
<input
type="text"
name="message"
placeholder="아무거나 입력해 보세요"
value={this.state.message}
onChange={this.handleChange}
onKeyPress={this.handleKeyPress}
/>
함수형 컴포넌트 이벤트 핸들링
import React, { useState } from 'react';
const EventPractice = () => {
const [username, setUsername] = useState('');
const [message, setMessage] = useState('');
const onChangeUsername = e => setUsername(e.target.value);
const onChangeMessage = e => setMessage(e.target.value);
const onClick = () => {
alert(username + ': ' + message);
setUsername('');
setMessage('');
};
const onKeyPress = e => {
if (e.key === 'Enter') {
onClick();
}
};
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="username"
placeholder="사용자명"
value={username}
onChange={onChangeUsername}
/>
<input
type="text"
name="message"
placeholder="아무거나 입력해 보세요"
value={message}
onChange={onChangeMessage}
onKeyPress={onKeyPress}
/>
<button onClick={onClick}>확인</button>
</div>
);
};
export default EventPractice;