2021-06-28
4장 이벤트 핸들링
사용자가 웹 브라우저에서 DOM(DOM; Document Object Model) 요소들과 상호 작용하는 것을 이벤트(evnet) 가고 한다.
4.1 리엑트의 이벤트 시스템
이벤트를 사용할 때 주의사항
- 이벤트 이름은 카멜 표기법으로 작성한다.
-
이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.
-
HTML에서 이벤트를 설정할 때는 큰 따옴표 안에 실행할 코드를 넣었지만 리액트에서는 함수 형태의 객체를 전달한다.
-
화살표 함수 문법으로 함수를 만들어 전달해도 되고, 렌더링 부분 외부에 미리 만들어서 전덜해도 된다.
-
-
DOM 요소에만 이벤트를 설정할 수 있다.
-
div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다.
-
컴포넌트에 자체적으로 이벤트를 설정하는 것이 아니라 그에 맞는 props를 전달해주는 것 뿐이다.
-
이벤트의 종류는 리액트 매뉴얼 을 참고하도록 한다.
4.2 예제로 이벤트 핸들링 익히기
- 컴포넌트 생성 및 불러오기
- onChange 이벤트 핸들링하기
- 임의 매서드 만들기
- input 여러 개 다루기
- onKeyPress 이벤트 핸들링하기
EventPractice.js
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;
위의 코드에서는 책 앞 부분에서 설정한 것과 달리 바벨의 transform-class-properties 문법을 사용하여 화살표 함수 형태로 메서드를 정의 하였다. 이는 메서드 바인딩을 통해서 생성자 메서드에서의 귀찮은 작업을 줄여준다.
onChange={
(e) => {
console.log(e)
}
}
onChange에서 e는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. 네이티브 이벤트와 인터페이가 같으므로 순수 자바스크립트에서 HTML 이벤트를 다룰 때와 똑같이 사용하면 된다. SyntheticEvent는 네이티브 이벤트와 달리 이벤트가 끝나고 나면 이벤트가 초기화되므로 정보를 참조할 수 없다. 만약 비동기적으로 이벤트 객체를 참조할 일이 있으면 e.persist() 함수를 호출해야 한다.
EventPractice의 handleChange 함수
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value,
});
};
const name = "varianKey";
const object = {
[name]: "value",
};
{
'varianKey' : 'value'
}
객체 안에서 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다.
