React Event handling

• React에서 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용한다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

HTML

<button onclick="handleEvent()">Event</button>

React

<button onClick={handleEvent}>Event</button>

onChange

input, textarea, select 와 같은 form 엘리먼트는 사용자의 입력값을 제어하는 데 사용된다.
아래와 같이 onChange 이벤트를 이용하여 해당 값들을 변경하거나 읽어올 수 있다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

onClick

onClick 이벤트는 말 그대로 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트다. 버튼이나 < a > tag 를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용한다. 위의 onChange 예시에 버튼을 추가하고, onClick 이벤트를 이용하여 input tag 에 입력한 이름이 alert을 통해 알림 창이 팝업 되도록 할 수 있다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={() => alert(name)}>Button</button>
      <h1>{name}</h1>
    </div>
  );
};