React 버튼 onClick 이벤트 핸들러를 화살표 콜백으로 넣어야 하는 이유 (React-Typescript)

버튼 태그를 만들 때 우리는 onClick을 이용하여, 버튼을 눌렀을 때 실행시킬 이벤트 핸들러 함수를 설정한다. 여기에는 두 가지의 방법이 있다. onCick에 들어갈 함수를 호출하는 것과, 참조하는 것이다. 바로 코드를 살펴보자.

호출

<Button
  content={"삭제"}
  variant="delete"
  type="button"
  onClick={handleDelete(toDo.id)}
/>

이 경우에는 버튼이 랜더링 될때마다 handleDelete라는 이벤트 핸들러 함수를 실행하게 된다. 페이지를 새로고침하거나 라우팅이 될때마다 onClick 내부에 들어있는 함수가 실행되게 되는 것이다.

참조

<Button
  content={"삭제"}
  variant="delete"
  type="button"
  onClick={() => handleDelete(toDo.id)}
/>

이 경우에는 버튼이 클릭 되었을 때만 habdleDelete 이벤트 핸들러 함수를 실행하게 된다.

함수의 호출과 참조에 대해서 더 자세하게 알아보자.

함수 호출

함수를 실행하는 것을 의미한다. JavaScript에서 함수를 호출할 때는 함수 이름 뒤에 괄호 ()를 붙여 실행한다.

function sayHello() {
  console.log("Hello!");
}

sayHello();  // "Hello!" 출력.

함수 호출은 해당 함수의 내부 코드를 실행하고, 함수가 값을 return할 경우 그 값을 함수 바깥으로 반환한다.

함수 참조

함수를 실행하지 않고 그 함수의 위치만을 가리키는 것을 의미한다. 함수의 이름만을 사용하여 그 함수 자체를 다른 변수나 상수에 할당할 수 있게 된다.

function sayHello() {
  console.log("Hello!");
}

const myFunction = sayHello;  // 이 부분이 함수 참조이다.

myFunction();  // "Hello!"를 출력.

React에서의 예시

// 잘못된 방식: 함수를 호출하는 형태
<button onClick={sayHello()}>Click me</button>

// 올바른 방식: 함수를 참조하는 형태
<button onClick={sayHello}>Click me</button>

이벤트 핸들러에 인자를 전달해야 할 때

다시 이전의 상황으로 돌아와보자.

<Button
  content={"삭제"}
  variant="delete"
  type="button"
  onClick={() => handleDelete(toDo.id)}
/>

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