JSX 함수의 매개변수

우리의 함수 showMess가 인사하고 싶은 상대방의 이름을 매개변수로 받도록 해보겠습니다:

function showMess(name) {
	alert('hello, ' + name);
}

이 매개변수는 함수를 이벤트에 바인딩할 때 전달할 수 있습니다. 이를 위해서 우리 함수의 호출을 화살표 함수로 감싸야 합니다:

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

이렇게 하면 동일한 함수를 서로 다른 매개변수로 여러 버튼에 바인딩할 수 있습니다:

function App() {
	function showMess(text) {
		alert(text);
	}
	
	return <div>
		<button onClick={() => showMess('user1')}>show1</button>
		<button onClick={() => showMess('user2')}>show2</button>
	</div>;
}

세 개의 버튼이 주어져 있습니다:

function App() {
	return <div>
		<button>act1</button>
		<button>act2</button>
		<button>act3</button>
	</div>;
}

첫 번째 버튼을 클릭하면 alert를 통해 숫자 1이, 두 번째 버튼을 클릭하면 숫자 2이, 세 번째 버튼을 클릭하면 숫자 3이 출력되도록 만들어 보세요.