[React] JSX에서 onClick 함수명 뒤 괄호 의미, 매개변수 넣어주기

1. 자바스크립트에서 괄호 생략하고 함수명만 작성했을 경우

function test() {
	console.log("test");
}
 
setTimeout(test, 3000);

 

2. 자바스크립트에서 괄호를 넣고 함수를 작성할 경우

function test() {
	console.log("test");
}
 
setTimeout(test(), 3000);

 

()는 호출연산자라고 불리는데, 이름 그대로 함수를 호출(실행) 하는 역할을 한다.

test 는 함수 그자체를 의미하고,

test() 는 test함수를 바로 실행하는 것을 의미한다.

 

첫번째 같은 경우는 3초 뒤에 test 함수를 실행하기 때문에 3초 뒤 "test"가 출력되는것을 볼 수 있다.

하지만 두번째 같은 경우는 그 즉시 실행하기 때문에 "test"가 웹페이지 로딩 시 바로 출력된다.

 

test() 이라고 하면 함수 자체가 아니라 함수를 실행한 결과가 저 자리에 들어가게 된다.

예를들어

function test() {
    return 100;
}

setTimeout(test(), 3000);

 

이렇게 쓸 경우 test()은 test 함수의 실행 결과, 즉 리턴값인 100이 될테니

setTimeout(100, 300);

이렇게 쓴거나 다름 없다. 이건 setTimeout의 사용법에 맞지 않는다.

 

리엑트(JSX문법)에서 onClick 이벤트에서도 동일하다.

1. 함수명만 적기 O
<button labelText="버튼" onClick={handleClick} />

2. 괄호 넣기 X
<button labelText="버튼" onClick={handleClick()} />

괄호를 넣을 경우 웹페이지 로딩 시 바로 실행되기 때문에 클릭했을 때 실행하는 원하는 이벤트를 처리할 수 없다.

 

만약 매개변수를 넘겨줘야해서 괄호를 사용해야 할 경우, 익명함수를 사용한다.

const handleClick = (param) => {
	console.log("버튼클릭")
}

return (
    <>
        <button labelText="버튼" onClick={() => handleClick(param)} />    	
    </>
)

이렇게 하면 버튼 클릭 시 이벤트를 처리할 수 있다.