Event
웹 브라우저에서 DOM 요소와 상호작용하는 것을 이벤트라고 합니다.
예를들어 DOM 요소를 클릭하면 onClick 이벤트를 정의해 상호작용을 하게 됩니다.
리액트 이벤트 시스템 주의사항
- 이벤트 이름은 카멜 표기법으로 작성
- 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달
- DOM 요소에만 이벤트 설정할 수 있다
- 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 단지 props를 전달해 줄 뿐.
클래스 컴포넌트의 이벤트 핸들링
- state와 메서드 활용
1. 이벤트 발생시 생성되는 e객체를 이용한 이벤트 핸들링
import React, { Component } from 'react';
class EventPractice extends Component {
state = {
message: ' '
};
render() {
return (
<div>
<input
type="text"
name="message"
placeholde="input"
value={this.state.message}
onChange={e => {
this.setState({ message: e.target.value });
}}
></input>
<br />
<button
onClick={() => {
alert(this.state.message);
this.setState({ message: ' ' });
}}
>
reset
</button>
</div>
);
}
}
export default EventPractice;
2. 이벤트에 실행할 자바스크립트 코드 대신 함수 형태의 값 전달
=> 클래스에 메서드를 만들어 이벤트 리스너에 바인딩
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>
<input
type="text"
name="message"
placeholde="input"
value={this.state.message}
onChange={this.handleChange}
></input>
<br />
<button onClick={this.handleClick}>reset</button>
</div>
);
}
}
export default EventPractice;
3. input 여러개 다루기
=> e.target.name의 "값"을 키로 가지는 객체를 생성
=> ref = 'key' ; { [ref] : 'value' } ref의 값을 key로 하는 객체 생성 { 'key' : 'value' }
=> 하나의 이벤트 핸들링 메서드로 여러 키값을 가지는 객체 생성가능
import React, { Component } from 'react';
class EventPractice extends Component {
state = {
message: ' ',
username: ' '
};
// ref = 'key' ; { [ref] : 'value' } ref의 값을 key로 하는 객체 생성 { 'key' : 'value' }
handleChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
handleClick = e => {
alert(this.state.username + ' : ' + this.state.message);
this.setState({ message: ' ' });
this.setState({ username: ' ' });
};
render() {
return (
<div>
<input
type="text"
name="username"
placeholder="username"
value={this.state.username}
onChange={this.handleChange}
></input>
<br />
<input
type="text"
name="message"
placeholde="message"
value={this.state.message}
onChange={this.handleChange}
></input>
<br />
<button onClick={this.handleClick}>reset</button>
<hr />
</div>
);
}
}
export default EventPractice;함수형 컴포넌트의 이벤트 핸들링
- useState 활용
import React, { useState } from 'react';
const EventPractice = () => {
const [form, setForm] = useState({
username: ' ',
message: ' '
});
const { username, message } = form;
const handleChange = e => {
const nextForm = {
...form,
[e.target.name]: e.target.value
};
setForm(nextForm);
};
const handleClick = e => {
alert(username + ' : ' + message);
setForm({
username: ' ',
message: ' '
});
};
return (
<div>
<input
type="text"
name="username"
value={username}
onChange={handleChange}
></input>
<br />
<input
type="text"
name="message"
value={message}
onChange={handleChange}
></input>
<br />
<button onClick={handleClick}>reset</button>
</div>
);
};
export default EventPractice;
'Javascript > React' 카테고리의 다른 글
| #5 React Component Lifecycle (0) | 2020.02.13 |
|---|---|
| #4 Component 반복 (0) | 2020.02.12 |
| #2 React Component (0) | 2020.02.12 |
| #1 basic react (0) | 2020.02.12 |
| #0 React intro (0) | 2020.02.12 |
