함수 참조 방식을 사용할 때 함수명 뒤에 괄호를 붙이면 안 됩니다. 괄호를 붙이면 함수가 바로 실행되므로 버튼을 클릭하지 않아도 컴포넌트가 화면에 나타나는 순간 함수가 실행됩니다. 즉, 다음은 잘못된 방법입니다.

<button onClick={clickHandler()}>click</button>

● 이벤트 핸들러의 매개변수

리액트에서는 이벤트 핸들러에 매개변수를 전달할 때 인라인 핸들러 방식을 사용해야 합니다. 함수 참조 방식으로는 매개변수를 전달할 수 없습니다. 예를 들어, 버튼을 클릭했을 때 ‘hello’라는 메시지를 출력하고 싶다면 다음과 같이 작성합니다.

src/App.tsx

export default function App() {

  const clickHandler = (msg: string) => {
    alert(msg);

  };
  return (
    <>

      <button onClick={() => { clickHandler('hello'); }}>click</button>

    </>
  );
}