[React] onClick 이벤트 핸들러를 arrow fun으로 콜백 넣어야 하는 이유

이벤트 핸들러

우리는 onClick 이벤트 핸들러를 지정해줄 때, 두가지 방법을 이용할 수 있다. 호출 과 참조 이다. 코드를 비교해보다

호출

handleDelete = (id) =>{
...
}
...

<Button
  type="button"
  onClick={handleDelete(data.id)}
/>

이경우에는 버튼이 렌더링 될때 마다 handleDelete라는 이벤트 핸들러함수가 재생성 된다. 페이지를 새로고침, 라우팅이 될때 onClick 내부에있는 함수가 실행된다는 의미다.

이렇게 작성하면 우리가 원하는 인자를 설정하기 전에 함수가 실행되기 때문에 원하는 결과를 얻지 못한다.

참조

handleDelete = (id) =>{
...
}
...
<Button
  type="button"
  onClick={() => handleDelete(data.id)}
/>

이 경우에는 버튼이 클릭 되었을 때만 habdleDelete 이벤트 핸들러 함수를 실행하기에 렌더링된 매개변수를 전달해줄 수 있다.

결론

onClick의 콜백으로 화살표 함수 형태의 이벤트 핸들러를 전달한 이유는 이벤트 핸들러가 매개변수(data.id)를 필요로 하기 때문이다. 화살표 함수로 콜백함수를 작성하는 것도 해당 함수를 참조하게 되는것과 동일한 기능을 한다.

인자가 필요없는 경우에는 호출방식을 사용하여 함수이름만 집어 넣는 방식을 택한다.