React 기초(2) - 이벤트 핸들러

이벤트 핸들러

어떠한 동작을 통해 특정한 이벤트가 일어나게 하는 모든 일을 말한다. 버튼을 클릭하는 것일 수도 있고, 엔터를 치는 것일 수도 있다.

function App() {

  const onSubmit = () => {
    alert('hello');
  }

  const onKeyUp = (event) => {
    if (event.keyCode === 13) {
      onSubmit();
    }
  }

  return (
    <div className="App">
      <input onKeyUp={onKeyUp} />
      <button onClick={onSubmit}>Submit</button>
    </div>
  );
}

export default App;

함수가 아닌 자바스크립트 코드를 바로 쓰면 랜더링 될 때 이벤트로 등록되는 것이 아니라 바로 실행된다. 또한 버튼도 작동이 안된다. 반드시 이벤트 핸들러는 함수로 작성하자.

이 외에도 onChange, onKeyDown 등 다양한 자바스크립트 핸들러가 있으니 필요에 따라 사용하자.