이벤트 핸들링
이벤트 핸들링 특징과 방법을 정리 했습니다.
자바스크립트나 제이쿼리보다 간편한 느낌이 들었습니다.
리액트 이벤트 핸들링 특징
1. 리액트에서 이벤트의 이름은 카멜 표기법으로 사용
예) onclick → onClick onchange → onChange
카멜 표기법으로 사용 하지않을 경우 아래와 같은 경고가 발생하고 정상적으로 동작하지 않습니다.
<input type = "text"
name = "message"
placeholder = "input message"
onchange={
(e) =>{
// console.log(e);
console.log(e.target.value);
this.setState({
message:e.target.value
})
}
}
value = {this.state.message}
/>
2. 이벤트에 실행할 코드를 전달하는것이 아닌 함수 형태의 객체를 전달
<button onClick={
()=>{
this.setState({
message : ''
})
}
}>
3. DOM 요소에만 이벤트 사용 가능
<div> <button> <input>등 DOM요소에만 이벤트를 사용할 수 있습니다.
직접 만든 컴포넌트에는 이벤트 사용이 불가합니다.
아래와 같이 직접 만든 컴포넌트에 이벤트를 작성하더라도 이벤트가 발생하지 않습니다.
render() {
return (
<EventPractice onLoad={
()=>{
console.log("test");
}
}/>
);
}
이벤트 종류
리액트에서 지원하는 이벤트는 아래 표와 같습니다.
Clipboard |
Form |
Composition |
Mouse |
Keyboard |
Selection |
Focus |
Touch |
UI |
Image | Wheel | Animation |
Media | Transition | |
이벤트 핸들링
1. 함수를 바로 작성하여 핸들링
함수 형태의 객체를 넘기기 때문에 함수형태로 작성해서 이벤트를 핸들링 합니다.
render() {
return (
<div>
<h1>이벤트 연습 - 함수를 랜더링 시 만들어서 핸들링</h1>
<button onClick={
()=>{
alert(this.state.message);
this.setState({
message : ''
})
}
}>
초기화
</button>
<input type = "text"
name = "message"
placeholder = "input message"
onChange={
(e) =>{
this.setState({
message:e.target.value
})
}
}
value = {this.state.message}
/>
</div>
);
}
2. 함수를 미리 작성하여 핸들링
미리 만들어 놓은 함수를 전달하여 핸들링도 가능합니다.
생성자 함수에서 만들어 놓은 함수를 바인딩 해줘야 합니다.
constructor(props){
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleChange(e){
let inputMessage = e.target.value;
console.log("input message : ",inputMessage);
this.setState({
message : inputMessage
})
}
handleClick(){
console.log("message == ",this.state.message);
this.setState({
message : ''
})
}
사용은 동일 합니다.
render() {
return (
<div>
<h1>이벤트 연습2 - 만들어논 함수를 전달해서 핸들링</h1>
<input type = "text"
name = "message"
placeholder = "input message"
onChange={this.handleChange }
value = {this.state.message}
/>
<button onClick={this.handleClick}>
초기화
</button>
</div>
);
}
3. Property Initializer Syntax를 사용한 함수 작성
생성자 함수를 사용하여 바인딩하는방법이 정석이지만,
새로운 함수를 추가할 때마다 생성자 함수를 수정해야하는 번거로움이 있습니다.
바벨의 transform-class-properties 문법을 사용하여 작성하면
생성자 함수를 사용하지 않고 동적으로 바인딩이 가능합니다.
handleChange = (e) => {
let inputMessage = e.target.value;
console.log("input message : ",inputMessage);
this.setState({
message : inputMessage
})
}
handleClick = () => {
console.log("message == ",this.state.message);
this.setState({
message : ''
})
}
4. 동일한 여러개의 태그 핸들링
동일한 여러개의 태그는 event객체를 활용해서 처리 가능 합니다.
e.target.name은 태그의 name과 같습니다.
아래와 같이 두개의 <input>태그가 있을 때
render() {
return (
<div>
<h1>input 여러개 핸들링</h1>
<input type = "text"
name = "name"
placeholder = "input name"
onChange={this.handleChange }
value = {this.state.name}
/>
<input type = "number"
name = "age"
placeholder = "input message"
onChange={this.handleChange }
value = {this.state.age}
/>
<button onClick={this.handleClick}>
초기화
</button>
</div>
);
}
아래의 형태로 사용이 가능합니다.
[]를 쓰게되면 key가 됩니다.
state = {
name : ''
,age : 0
}
handleChange = (e) => {
console.log("e.target.name = ",e.target.name);
console.log("e.target.value = ",e.target.value);
this.setState({
[e.target.name] : e.target.value
})
}
5. onKeyPress 이벤트 핸들링
위의 예제에서 Enter키를 입력하면 초기화 버튼을 클릭하는 이벤트를 작성했습니다.
이벤트 처리를 위한 함수 작성
handleClick = () => {
alert("초기화!");
console.log("name = ",this.state.name, " age = ",this.state.age);
this.setState({
name : ''
,age : 0
})
}
handleKeyPress = (e) =>{
if(e.key === 'Enter'){
this.handleClick();
}
}
<input type = "number"
name = "age"
placeholder = "input message"
onChange={this.handleChange }
value = {this.state.age}
onKeyPress = {this.handleKeyPress}
/>
참고 : 리액트를 다루는 기술(저:VELOPERT)