React
[React] 동적인 eventHandler 구현 시 주의
단호박햄톨
2024. 3. 29. 16:00
잘못된 구현
function handleClick(){
console.log('click');
}
<li>
<button onClick={handleClick()}>{children}</button>
</li>
-> 잘못된 구현인 이유 : handleClick()은 이 코드 라인이 실행될 때 이 함수가 바로 실행됨. (화면이 렌더링 될때)
올바른 구현
<li>
<button onClick={handleClick}>{children}</button>
</li>
-> 단순히 함수 이름을 사용 > onClick값으로서의 함수를 전달 > 리액트에 의해 시스템뒤에서 실행됨