🟦 [React] onClick={함수}, {함수()}, {() => 함수}, {() => 함수()} 차이

쓸 때마다 헷갈려서  개념 바로 잡기❗❕

📌 onClick 함수 쓰임 설명

코드	실행 여부	설명
🔸 onClick={함수}	🔸 클릭할 때 실행	(권장) 함수 참조 방식
onClick={함수()}	즉시 실행	(오류) 렌더링 될 때 마다 계속 실행됨
onClick={() => 함수}	실행 안 됨	함수를 반환하지만 실행은 안 됨
🔹 onClick={() => 함수()}	🔹 클릭할 때 실행	익명 함수 안에서 실행

 

❓ 그럼 여기서 🔸 onClick={함수} 와 🔹 onClick={() => 함수()} 의 다른점은? ❓

👩🏻 => 함수만 실행 예정이면 🔸 onClick={함수} 사용

👩🏻 => 인자 전달을 할 예정이면 🔹 onClick={() => 함수()} 사용

 

코드	설명	길게 풀기
🔸 onClick={함수}	함수를 직접 참조하기 때문에 성능상 유리함	button.addEventListener("click", handleClick);
🔹 onClick={() => 함수()}	익명 함수 안에서 실행되기 때문에, 추가적인 인자 전달 가능 => 다만, 리렌더링될 때마다 새로운 함수가 생성됨 (성능 저하 가능성 있음)	button.addEventListener("click", function() {   handleClick('modal1'); // 클릭할 때 실행됨 });

 

 

 

이 전에 썼던 글에서는 바로 실행하는 함수만 비교

 

🟦 [React] onclick={함수()}, onclick={() => 함수()} 차이점