[React] 이벤트 처리할 때 파라미터 넘겨주기

✨출처 - 리액트 공식 도큐멘트✨

누르는 버튼에 따라 조~금씩 동작이 달라서 이벤트 처리 함수를 통합하고 싶었다!
그래서 누르는 버튼이 어떤 것이었는지 전달하여 구분 후 처리를 하기 위해
누른 버튼이 뭔지 파라미터로 전달하려했다.

😲수정 전

그냥 별 생각없이

<button onClick={onClickButton(num)}>{test}</button>

이렇게 짰다가! 에러가 쫘아아아아아악나는 것을 보고... 공식 도큐멘트를 읽었다..🤣

공식 문서에는 이벤트 핸들러에 인자 전달하는 방법이 두 가지 나와있었다.

• 화살표 함수 사용

  <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

• bind 사용

  <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

  다른 점은 화살표 함수를 사용하면 명시적으로 인자를 전달해야하고, bind를 사용하면 추가 인자가 자동으로 전달되는 것이다!

😁수정 후

아래와 같이 화살표 함수를 사용하였더니 에러없이 잘 실행됐다~! 야호!

<button onClick={(e) => onClickButton(num, e)}>{test}</button>