Languages/JavaScript

[React] onClick props에 함수형 변수의 () 유무 차이

반응형
function ExpenseItem(props) {
	const clickHandler = () => {
		console.log('click!');
	};

	return (
		<button onClick={clickHandler}>Change Title</button>
	);
}

export default ExpenseItem;

button의 onClick에 들어간 clickHandler에 괄호를 함께 입력하여 clickHandler()로 들어가면 JSX를 최초에 읽어올 때 실행하게 된다. 하지만 ()를 삽입하지 않고 const명만 clickHandler로 입력해두면 JSX를 읽어온 뒤 클릭하면 clickHandler 함수를 실행하게 된다. 

728x90
반응형