[React] onClick에 매개변수 넣기

 

 

뭐야 누르지도 않았는데 이벤트가 발동하네?

 

간단하게 onClick하면 '클릭했어!' console.log를 실행하는 함수가 있다.

하지만 위와 같이 (리)로딩되자마자 이벤트가 실행되었다! 

이유가 무엇일까? 🤔

 

매개변수를 잘 전달하자

<button className="spanButton" onClick={spanButtonClick(list.data._id)}>

일반 함수에 매개변수를 넘겨주는 방식인 괄호 안에 매개변수를 넣을 경우 즉각 실행되기 때문에 그랬던 것이다.

그렇다면 어떻게 해야할까?

 

onClick={() => {spanButtonClick(list.data._id);}}

우리는 익명함수로 감싸줘야 한다.

이렇게 할 경우 의도한 대로 버튼을 눌러야지만 이벤트가 실행된다.