리액트 button 태그 자동 클릭되는 현상 막는 법

[ 리액트 button 태그 자동으로 클릭되는 현상 막는 법 ]

(이벤트가 두번 실행되는 오류 해결하기)

 

<BaseSelectorTriggerBtn
	type="button"
	onClick={() => console.log("test")}
>

 

1) type="button" 설정

2) onClick={() => console.log("test")}

 

 

 

[ 이유 ]

onClick 이벤트에 함수를 전달하는게 아니라 바로 호출했기 때문에 리액트의 onclick은 렌더링 때 실행된다.

 

(1)

<button id="btn" onClick={alert("hi")} />

렌더링 될때 (버튼 클릭 전) 이벤트 발생함.

 

<button id="btn" onClick={() => alert("hi")} />

정상적으로 버튼을 클릭할 때 이벤트 발생함.

 

(2) 혹은 index.js 파일의 StrictMode 때문일 수 있으니, 위 방법으로 안되면 StrictMode 코드도 지워봐야한다.

https://ko.reactjs.org/docs/handling-events.html