[React] 이벤트 핸들러에 함수를 전달하는 방법

이벤트 핸들러에 함수 전달&호출하기

// 함수를 전달하기 (올바른 예시)	
<button onClick={handleClick}>	

// 함수를 호출하기 (잘못된 예시)
<button onClick={handleClick()}>

올바른 예시에서는 handleClick 함수가 onClick 이벤트 핸들러에 전달된다면 리액트는 해당 함수를 사용자가 버튼을 클릭했을 때만 호출합니다.

그러나 잘못된 예시에서는  handleClick 함수가 onClick 이벤트 핸들러에서 호출된다면 리액트는 해당 함수를 사용자가 버튼을 클릭하지 않아도 렌더링 과정에서 호출합니다.

이는 리액트가 렌더링 과정에서 JSX 와 {  } 내의 자바스크립트가 즉시 실행되도록 구현되어 있기 때문입니다.

매개변수가 필요한 함수를 이벤트 핸들러에 전달하고 싶다면?

그렇다면 매개변수가 필요한 함수를 이벤트 핸들러에 전달하고 싶으면 어떻게 코드를 작성해야할까요?

이는 익명함수를 통해 구현할 수 있으며 아래와 같이 코드를 작성하면 매개변수가 필요한 함수를 이벤트 핸들러에 전달할 수 있습니다.

// 이 alert는 클릭 시 실행되지 않고 컴포넌트가 렌더링 된 시점에 실행됩니다!
<button onClick={alert('You clicked me!')}>