이벤트 핸들링

기본 방식

• 소문자 대신 카멜 케이스(camelCase) 사용
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수 전달

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

onChange

• 입력값이 바뀔 때마다 발생하는 이벤트

폼(Form)엘리먼트 <input>, <textarea>, <select> 에 입력되는 입력값(변경될 수 있는 입력값)을 state로 관리하고 업데이트한다.
이때 해당 이벤트를 사용하면 그 입력값을 읽어올 수 있다.

예제

function NameForm() {
  const [name, setName] = useState("");
  // const [state 저장 변수, state 갱신 함수] = useState(state 초깃값);
  const handleChange = (e) => {
    setName(e.target.value); //setName으로 인해 name값이 변경된다.
  }

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

onChange 이벤트가 있는 input에 내용이 입력되면 {handleChange}라는 변수에 할당된 setName 함수에 들어간 (e.target.value)로 인해 입력값을 읽을 수 있게 되고,
그러한 입력값은 name이라는 변수에 할당되며 마지막으로 h1태그에 나타난다.

onClick

• 사용자가 클릭이라는 행동을 할때 발생하는 이벤트
  <a>, <button> 처럼 링크 이동 등과 같이 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용하는 이벤트

예제

function NameForm() {
  const [name, setName] = useState("");
  // const [state 저장 변수, state 갱신 함수] = useState(state 초깃값);
  const handleChange = (e) => {
    setName(e.target.value); //setName으로 인해 name값이 변경된다.
  }

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

onChange 이벤트가 이루어지고나서 onClick이벤트가 들어간 버튼을 클릭하게 되면 onChange 이벤트로 인해 나온 name값을 팝업창으로 나오게 된다.

• 만약 그 결과가 undefined라면 위와 같이 알림으로 했을 때 아무 결과도 일어나지 않게 된다.

onClick 이벤트에 함수를 전달할 때

• 리턴문 안에서 함수를 정의
• 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달

// 함수 정의하기

return (
  <div>
	...
    <button onClick={() => alert(name)}>Button</button>
	...
  </div>
  );
};

// 함수 자체를 전달하기

const handleClick = () => {
  alert(name);
};

return (
  <div>
      ...
    <button onClick={handleClick}>Button</button>
      ...
  </div>
  );
};