[React]이벤트 핸들러에 인자 전달하기

const test = (num) => {
   console.log(num);
};

return (
   <div>
      1: <button onClick={test(1)}>Click</button>
      2: <button onClick={ () => test(1) }>Click</button>
   </div>
);

아마 개발에 익숙하다면 1번이 익숙하실 겁니다. 그런데 리액트에서는 1번으로 할 경우 시뻘건 화면을 띄우면서 무한 루프에 빠졌다고 오류를 뱉어냅니다. 반드시 2번처럼 하셔야 합니다.

[참고]