React Study(3) - 리액트를 다루는 기술 4장
#4장 이벤트 핸들링
4.1.1 이벤트를 사용할 떄 주의 사항
1. 이벤트 이름은 카멜 표시법으로 작성(onclick->onClick)
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달
3. DOM요소에만 이벤트를 설정 가능(div,button,input,form)에는 가능, 직접 만든 컴포넌트에는 불가능
4.1.2 이벤트 종류
Clipboard, Touch, Composition, UI, Keyboard
Wheel, Focus, Media, Form, Image, Mouse, Animation
Selection, Transition
4.2 예제로 이벤트 핸들링 익히기
컴포넌트 생성 및 불러오기
onChange 이벤트 핸들링하기
임의 메서드 만들기
input 여러 개 다루기
onKeyPress 이벤트 핸들링하기
4.2.1 컴포넌트 생성 및 불러오기
<App.js>
import EventPractice from './EventPractice';
const App = () => {
return <EventPractice/>;
}
export default App;
<EventPractice.js>
import {Component} from 'react';
class EventPractice extends Component{
render(){
return (
<div>
<hi1>이벤트 연습</hi1>
</div>
);
}
}
export default EventPractice;
4.2.2 onChange 이벤트 핸들링하기
EventPractice 컴포넌트에 input 요소를 렌더링하는 코드와 해당 요소에 onChange 이벤트를 설정
<EventPractice.js>
import {Component} from 'react';
class EventPractice extends Component{
render(){
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력해 보아요"
onChange={
(e)=>{
console.log(e);
}
}></input>
</div>
);
}
}
export default EventPractice;
이벤트가 끝나고 나면 초기화 되므로 정보 참조 불가능
비동기적으로 이벤트 객체를 참조할 일이 있다면
console.log(e.target.value)
4.2.2.2 state에 input 값 담기
<EventPractice.js>
import {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
})
}
}></input>
<button onClick={
() =>{
alert(this.state.message);
this.setState({
message:''
})
}
}>확인</button>
</div>
);
}
}
export default EventPractice;
4.2.3 임의 메서드 만들기
주의 사항에서 "이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다" 라고 배웠다.
함수를 미리 전부히여 전달하는 방법 = > 성능상으로 큰 차이는 없지만 가독성 좋음
onChange와 onClick에 전달할 함수를 빼내기
<EventPractice1.js>
import {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}>
</input>
<button onClick={this.handleClick}>확인</button>
</div>
);
}
}
export default EventPractice;
4.2.3.2 Property Initializer Syntax를 사용한 메서드 작성
메서드 바인딩은 생성자 메서드에서 하는 것이 정석이다. 그러면 메서드를 새로 만들때마다 constructor도 수정해야한다.
바벨의 transform-class-properties 문법을 사용하여 화살표 함수 형태로 메서드를 정의하면 간단하다.
4.2.4 input 여러개 다루기
input이 여러개라면 메서드를 더 만들어야 할까?
event 객체를 활용해 e.target.name값을 사용하면 된다.
onChange 이벤트 핸들러에서 e.target.name은 해당 인풋의 name을 가리킨다.
이 값을 사용하여 state를 설정하면 해결 가능.
<EventPractice3.js>
// input이 여러개 일 때
import {Component} from 'react';
class EventPreactice3 extends Component {
state = {
username:'',
message:''
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}
handleClick = () => {
alert(this.state.username + ': ' + this.state.message);
this.setState({
username:'',
message:''
});
}
render() {
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="username"
placeholder="사용자명"
value={this.state.username}
onChange={this.handleChange}>
</input>
<input
type="text"
name="message"
placeholder="아무거나 입력해보세요"
value={this.state.message}
onChange={this.handleChange}>
</input>
<button onClick={this.handleClick}>확인</button>
</div>
)
}
}
export default EventPreactice3;
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}
객체 안에서 key를 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key값으로 사용
예를 들어
const name = 'varianKey;'
const object = {
[name]: 'value'
};
결과는 varianKey = value
4.2.5 onKeyPress 이벤트 핸들링
키를 눌렀을 때 발생하는 KeyPress 이벤트를 처리하는 방법
comment input에서 enter를 눌렀을 때 handleClick 메서드 호출하도록
4.3 함수 컴포넌트로 구현해보기
<EventPractice5.js>
import {useState} from 'react'
const EventPractice5 = () =>{
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"
placholder="아무거나 입력하세요"
value={message}
onChange={onChangeMessage}
onKeyPress={onKeyPress}>
</input>
<button onClick={onClick}>확인</button>
</div>
)
}
export default EventPractice5;