JSX에서 이벤트 바인딩하기

이제 React에서 이벤트 작업을 배워봅시다. 예를 들어, 블록을 클릭하면 일부 텍스트가 포함된 alert가 표시되도록 만들어 보겠습니다.

showMess라는 함수가 있고, 이 함수는 메시지와 함께 alert를 표시합니다. HTML 코드에는 버튼이 있으며, 이 버튼을 클릭하면 이 alert가 표시되기를 원합니다:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button>show</button>
	</div>;
}

이 버튼에 onclick 이벤트를 바인딩해 봅시다. 이 div를 클릭하면 showMess 함수가 실행되도록 합니다. 이를 위해 onClick 속성을 추가해야 합니다 (정확히 camelCase로, 즉 onClick이며 onclick가 아닙니다). 그리고 그 안에 이 이벤트가 발생했을 때 실행될 함수를 지정합니다:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button onClick={showMess}>show</button>
	</div>;
}

이것이 이벤트 작업 방식입니다: 속성을 추가하고(예: onClick 또는 onFocus), 속성 값으로 해당 이벤트에 의해 호출될 메서드를 지정합니다.

다음 코드가 주어졌습니다:

function App() {
	function show1() {
		alert(1);
	}
	
	function show2() {
		alert(2);
	}
	
	return <div>
		<button>act1</button>
		<button>act2</button>
	</div>;
}

첫 번째 버튼을 클릭하면 첫 번째 함수가 실행되고, 두 번째 버튼을 클릭하면 두 번째 함수가 실행되도록 만드세요.