JSX 함수의 매개변수

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

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

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

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

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

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

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