리액트 이벤트핸들러 함수 바인딩

HTML의 경우, 요소를 클릭했을 때 함수 호출하는 방법은 아래와 같다.

<button onclick="clickHandler()">Submit</button>

리액트의 경우, jsx에서 HTML처럼 이벤트핸들러 함수를 넘겨주게 되면(괄호 사용), 클릭이벤트 발생 시 함수 호출하고자하는 의도와는 다르게 jsx가 파싱될 때 함수가 바로 실행되어버린다. 의도대로 하기 위해서는 괄호를 쓰지 않고 함수를 참조하도록 하거나 익명함수의 콜백으로 넘겨주는 방법이 있다.

// () 쓰지 않고 해당 함수 참조하도록 하기
<button onClick={clickHandler}>
// 익명함수의 콜백함수로 넘겨주기
<button onClick={() => clickHandler()}>

💡오늘자 새로운 배움

부끄럽게도 이벤트 객체 넘겨주기 관련해서 여태껏 잘못 알고 있던 것이 있었다. jsx에 바인딩하는 이벤트핸들러 함수가 이벤트 객체를 넘겨받아야 하는 경우 무조건 익명 함수의 콜백으로 만들고 매개변수를 꼭 써줘야하는 줄 알았다. 근데 꼭 그렇게 할 필요없이 그냥 함수 참조만 하게 하고 함수 정의할때 매개변수 써주면 된다...

Before

const clickHandler = (e) => {console.log(e)}

return <button onClick={(e) => clickHandler(e)}>Click</button>

After

const clickHandler = (e) => {console.log(e)}

return <button onClick={clickHandler}>Click</button>