[React] 이벤트 처리

React의 이벤트명은 보통 camelCase 사용

<button onClick={activateLasers}>
	Activate Lasers
</button>

기본 동작을 방지하기 위해선 preventDefault 호출

ex) 폼 제출시 새로고침 방지 등등

function Form() {
	function handleSubmit(e) {
		e.preventDefault();
		console.log('You clicked submit.');
	}
	
	return (
		<form onSubmit={handleSubmit}>
			<button type="submit">Submit</button>
		</form>
	);
}

클래스 컴포넌트일 경우 바인딩 유의

class Toggle extends React.Component {
	constructor(props) {
		super(props);
		this.state = {isToggleOn: true};
		// 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 함
		this.handleClick = this.handleClick.**bind**(this);
	}
	
	handleClick() {
		this.setState(prevState => ({
			isToggleOn: !prevState.isToggleOn
		}));
	}
	
	render() {
		return (
			<button onClick={this.handleClick}>
				{this.state.isToggleOn ? 'ON' : 'OFF'}
			</button>
		);
	}
}

또는 public class fields로 지정

class LoggingButton extends React.Component {
	handleClick = () => {
		console.log('this is:', this);
	};
	
	render() {
		return (
			<button onClick={this.handleClick}>
				Click me
			</button>
		);
	}
}

또는 콜백에 화살표 함수 사용

class LoggingButton extends React.Component {
	handleClick() {
		console.log('this is:', this);
	}
	
	render() {
		return (
			<button onClick={() => this.handleClick()}>
				Click me
			</button>
		);
	}
}

그러나 이는 컴포넌트가 렌더링 될때마다 다른 콜백이 생성되는 것이므로, 콜백에 하위 컴포넌트에 props로서 전달된다면 컴포넌트들이 추가로 다시 렌더링해야 할수도 있음