onClick이벤트에 event객체 외 다른 인자 전달하기

이벤트 핸들러에 인자 전달

버튼을 누르면 변수에 저장된 값을 출력

function App() {
  
  let key1 =  "first button";
  let key2 =  "second button";
  

  function alertFun(key, event){
    return alert(key);
  }

  return (
    <div className="App">
      {/* 화살표 함수를 사용 */}
      <div><button onClick={(e) => alertFun(key1, e)}>button 1</button></div>
      {/* bind를 사용 */}
      <div><button onClick={alertFun.bind(this, key2)}>button 2</button></div>
    </div>
  );
}

• 두 방법 모두 event 객체는 key1, key2 뒤의 인자로 전달된다.
• event 객체의 경우, 화살표 함수는 'e' 같이 명시적으로 인자를 전달해야 하지만 bind는 자동으로 인자가 전달된다
• 화살표 함수의 경우 렌더링 될 때마다 콜백함수가 새로 생성돼서 성능 문제를 일으킬 수 있다.(클래스 문법을 사용하는 경우 생성자 안에서 바인딩 하거나 클래스 필드 문법을 사용해서 해결할 수 있다.)

출처
https://ko.reactjs.org/docs/handling-events.html