JSX에서 이벤트 바인딩하기

이제 React에서 이벤트 작업을 배워봅시다. 예를 들어, 블록을 클릭하면 일부 텍스트가 포함된 alert가 표시되도록 만들어 보겠습니다.

showMess라는 함수가 있고, 이 함수는 메시지와 함께 alert를 표시합니다. HTML 코드에는 버튼이 있으며, 이 버튼을 클릭하면 이 alert가 표시되기를 원합니다:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button>show</button>
  </div>;
}

이 버튼에 onclick 이벤트를 바인딩해 봅시다. 이 div를 클릭하면 showMess 함수가 실행되도록 합니다. 이를 위해 onClick 속성을 추가해야 합니다 (정확히 camelCase로, 즉 onClick이며 onclick가 아닙니다). 그리고 그 안에 이 이벤트가 발생했을 때 실행될 함수를 지정합니다:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button onClick={showMess}>show</button>
  </div>;
}

이것이 이벤트 작업 방식입니다: 속성을 추가하고(예: onClick 또는 onFocus), 속성 값으로 해당 이벤트에 의해 호출될 메서드를 지정합니다.

jsxfunction App() {
  function show1() {
    alert(1);
  }
  
  function show2() {
    alert(2);
  }
  
  return <div>
    <button>act1</button>
    <button>act2</button>
  </div>;
}