리액트에서 onClick 함수를 사용하면서 이벤트 외에 다른 파라미터를 전달해야하는 경우가 생겼다.

이를 해결하는 방법에는 몇가지 방법이 존재하지만 나는 화살표 함수를 사용하는 방법으로 해결을 하였다.

화살표 함수의 사용은, 화살표함수로 원래 기능을 제공하는 함수를 감싸면 된다.

이벤트 핸들러에 파라미터 전달하기

잘못된 방법

제대로된 방법을 몰랐을 때는 무작정 인자를 넘겨보았고, 역시 제대로된 해답은 되지 않았다.

const clickHandler = (e, params) => {
  console.log(params); // error
  e.preventDefault();
  // do someting...
}

return (
	<button onClick={clickHandler}> Do Something!</button>
)

위와 같이 작성할 경우, 애초에 onClick은 1개의 파라미터만 전달하기 때문에 params는 undefined로 전달된다.

옳바른 방법

이 방법은 리액트 공식문서에 존재하는 방법이다.
화살표 함수를 이용하여 원래 부르려던 함수를 감싸고, 해당 함수의 호출부에서 인자를 넘겨주면 된다.

const clickHandler = (params, e) => {
  console.log(params); // error
  e.preventDefault();
  // do someting...
}

return (
	<button onClick={(e)=>{clickHandler(params, e)}}> Do Something!</button>
)

참조

리액트 공식 문서 - 이벤트 처리하기