[JS] 함수 참조, 함수 호출

리액트를 하다가 너무 기본적인 문법이 헷갈렸다...

예시로,

onClick={handleClick} vs onClick={handleClick()}

함수 참조

onClick={handleClick}

버튼을 클릭할 때 실행할 함수를 넘기는 것

쉽게하면, 이 함수는 나중에 필요할 때 사용할 거야~

소괄호 없이 써야 버튼을 누를 때만 실행되도록 할 수 있음!

함수 호출

onClick={handleClick()}

버튼을 클릭하기도 전에 실행하라는 것

쉽게하면, 이 함수를 지금 바로 실행하라!

 

function handleClick() {
  console.log("Button clicked!");
}

// 올바른 사용
<button onClick={handleClick}>Click Me</button>

// 잘못된 사용
<button onClick={handleClick()}>Click Me</button> // 즉시 실행돼버림