[트러블슈팅] 이벤트 핸들러 함수의 () 유무 차이

onClick 이벤트를 작성할 때

 const GoResetPW =()=>{
        navigate("/profile/changePW");
 }
 <span onClick={GoResetPW()}>비밀번호 변경</span>

이렇게 onclick 이벤트 때 호출할 함수 뒤에 ()를 붙이게 되면 페이지가 새로고침되자마자 경로가 이동하게 된다.

<span onClick={GoResetPW}>비밀번호 변경</span>

하지만 이런 식으로 함수 뒤에 ()를 삭제하고 호출하게 되면 정상적으로 onclick 이벤트가 작동한다.

그 이유는 ()를 붙인 코드는 즉시 함수가 실행되기 때문이다. 컴포넌트가 렌더링되면서 즉시 함수가 실행되기 때문에 페이지가 새로고침되자마자 바로 경로가 이동하게 된다.
onclick 이벤트를 정상적으로 작동하기 위해서는 ()를 빼고 함수 참조만 넘겨주어야 한다.