이벤트 핸들링

사용자가 브라우저에서 DOM 요소들과 상호작용하는 것을 이벤트라고 합니다.
HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 비슷합니다.

주의사항

1. 이벤트 이름은 카멜 표기법으로 작성한다.
2. 이벤트에 함수 형태의 값을 전달합니다.
3. DOM 요소에만 이벤트를 설정할 수 있습니다.

onChange 이벤트 핸들링

import React, { Component } from 'react';

export default class MyEvent extends MyComponent {
	render() {
		return (
			<div>
				<h1>이벤트 연습</h1>
				<input
					type="text"
					name="message"
					placeholder="text 입력"
					onChnage={(e) => {
						console.log(e);
					}}
				/>
			</div>
		);
	}
}

state에 input 값 담기

import React, { Component } from 'react';

export default class MyEvent extends MyComponent {
	state = {
		message: ''
	}

	render() {
		return (
			<div>
				<h1>이벤트 연습</h1>
				<input
					type="text"
					name="message"
					placeholder="text 입력"
					value={this.state.value}
					onChnage={(e) => {
						this.setState({
							message: e.target.value,
						});
					}}
				/>
				<button
					onClick={() => {
						alert(this.state.message);
						this.setState({
							message: '',
						});
					}}
				>
					확인
				</button>
			</div>
		);
	}
}

가독성을 훨씬 높이기 위해서 함수로 만들 수 있습니다.
상황에 따라 렌더링 메서드 내부에서 함수를 만들 수도 있습니다.

import React, { Component } from 'react';

export default class MyEvent extends MyComponent {
	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="text 입력"
					value={this.state.message}
					onChnage={this.handleChange}
				/>
				<button onClick={this.handleClick}>확인</button>
			</div>
		);
	}
}

바벨의 transform-class-properties 문법을 사용하여 화살표 함수 형태로 메서드를 정의할 수도 있습니다.

state = {
	message: '',
};

handleChange = (e) => {
	this.setState({
		message: e.target.value,
	});
}

handleClick = () => {
	alert(this.state.message);
	this.setState({
		message: '',
	});
}

input이 여러개일 경우에는 다음과 같은 코드가 핵심입니다.

handleChange = e => {
	this.setState({
		[e.target.name]: e.target.value
	});
}

## 예시
const name = 'key';
const object = {
	[name]: 'value'
};

// 결과물
'key': 'value'

함수형 컴포넌트로 구현

import React, { useState } from 'react';

const MyEvent = () => {
	const [form, setForm] = useState({
		username: '',
		message: '',
	});
	const { username, message } = form;
	const onChnage = (e) => {
		const nextForm = {
			...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} onChnage={onChnage} />
			<input
				type="text"
				name="message"
				placeholder="메세지"
				value={message}
				onChnage={onChnage}
				onKeyPress={onKeyPress}
			/>
			<button onClick={onClick}>확인</button>
		</div>
	);
};

export default MyEvent;

리액트를 다루는 기술(개정판)을 정독하면서 서술한 내용입니다.