[React] 이벤트리스너와 콜백함수

이벤트 처리 방식

---

• 함수 자체를 전달하는 형태로 작성

<button onclick={handleEvent}>Event</button>

이런 식으로 이벤트리스너에 이벤트 핸들러 함수를 지정해주는 건 알고 있었는데,
react 에서 이벤트 핸들러 함수에 이벤트 객체 말고 다른 인자를 넘기려고 하면 의도한대로 동작하질 않았다.

const handleEvent = (params) => {
  ...
}

return (
  <button onclick={handleEvent(params)}>Event</button>
)

이렇게 작성하면 함수 자체가 전달되는 게 아니라 함수를 호출하는 형태가 되어, React가 JSX를 Javascript로 렌더링할 때 함수를 자동으로 실행해버린다.
즉, 이벤트 핸들러 함수가 이벤트가 호출될 때 동작하는게 아니라 렌더링될 때 동작해버리는 것이다.

해결 방법

---

공식 문서를 잘 읽자....
react 공식문서 참고

익명함수 내부에 원래 실행하려고 했던 콜백을 넘겨줄 파라미터와 함께 추가해주면 된다.

const handleEvent = (params) => {
  ...
}

return (
	<button onClick={() => handleEvent(params)}>Event</button>
)

이 방법은 함수가 호출될 때 마다 새로운 익명 함수가 생성되기 때문에 성능이 중요한 웹의 경우 단점이 될 수 있다.

참고로, 파라미터와 e 객체를 둘 다 받아야하는 경우라면 다음과 같이 작성해줘야 한다.

const handleEvent = (params, e) => {
  ...
}

return (
	<button onClick={(e) => handleEvent(params, e)}>Event</button>
)

이벤트 핸들러 함수로 어떤 파라미터도 넘겨줄 필요가 없을 때는 그냥 첫 번째 파라미터로 event 객체가 자동으로 들어오기 때문에 명시해줄 필요가 없다.
그러나, event 객체와 함께 넘길 파라미터가 있는 경우에는 event 객체가 이벤트 핸들러 함수가 아닌 익명함수의 파라미터로 들어가기 때문에, 이벤트 핸들러 함수에 다시 파라미터로 넘겨줘야 한다.