[React] 동적인 eventHandler 구현 시 주의

잘못된 구현

function handleClick(){
	console.log('click');
}

<li>
	<button onClick={handleClick()}>{children}</button>
</li>

-> 잘못된 구현인 이유 :  handleClick()은 이 코드 라인이 실행될 때 이 함수가 바로 실행됨. (화면이 렌더링 될때)

 

올바른 구현

<li>
	<button onClick={handleClick}>{children}</button>
</li>

-> 단순히 함수 이름을 사용 >   onClick값으로서의 함수를 전달 > 리액트에 의해 시스템뒤에서 실행됨