React에서 이벤트 적용하기

class App extends React.Component {
  return (
    <div>
      <button>Click Me!</button>
    </div>
  );
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

위와 같은 App 컴포넌트가 있을 때,
button을 클릭했을 경우 alert를 뜨게 하고 싶으면

Vanilla JS의 경우에는

<button onclick=”alert(‘hi’)”>Click Me!</button>

이런식으로 하면 되고

리액트의 경우에는

<button onClick={alert(‘hi’)}>Click Me!</button>

이런식으로 하면 될 것 같지만 사실은 rendering이 될 때 함수 호출 결과가 onClick에 바인딩 되기 때문에 아무것도 실행이 안된다.

따라서

<button onClick={()=>alert(‘hi’)}>Click Me!</button>

이렇게 arrow function 등을 이용하여 호출해야 한다.