const handleClick = (operator) => {
  ...
}



  <button type="button" onClick={() => { onClickOperator(operator); }}>{operator}</button>

코드숨 1주차 과제2인 간단 계산기 만들기를 진행하면서 연산자를 눌렀을 때 생기는 이벤트를 담은 함수를 onClickOperator라 진행했습니다. 그리고 해당 코드에 대해서 윤석님께서 이런 리뷰를 달아주셨습니다.

image image

핸들러 함수와 일반 함수를 혼동하고 있다. 핸들러 함수는 특정 이벤트를 처리하는 함수이다.

고로


() => onClickOperator(operator)

이 함수 자체가 핸들러 함수인 것. 클릭 이벤트에 바인드 될 이벤트 핸들러 함수는 {} 중괄호 안에 들어오는 전체였던 거다. 그러므로 이 자체가 클릭했을 때 실행된 함수인 거고 그 함수를 실행했을 때 행해질 또다른 동작 메서드가 있어야하는 거니까 이름을 바꿔주 거나 핸들러함수를 정말 명시적으로 써주고 그 다음으로 이어질 함수를 따로 빼서 추가해주어야한다.

image

처음에는 의도를 파악하지 못하고 예전에 봤던 함수와 함수호출 차이라고 생각하여 해당 영상을 보고 이해중이었는데, 제로초님 js강좌

코드숨 2주차 과제를 진행하면서 또 핸들러 함수를 작성하다가 뭔가 미묘하게 내가 접근을 잘못하는 건가? 라는 생각이 들어 윤석님께 여쭤봤더니 다시 상세하게 설명을 해주셨고 드디어 제대로 이해할 수 있었다! 감사합니다!

image