Event Handeling

• 소문자 대신 카멜케이스를 사용
• 문자열이 아닌 함수로 이벤트 처리 함수를 전달
  HTML :

<button onclick="handleEvent"></button>
<button onClick={handleEvent}></button>

이벤트 종류

React에서는 변경될 수 있는 입력값을 컴포넌트의 state로 관리

1.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>
  )
};

input에 글자를 입력하면, onChange 이벤트가 발생하고,
이 이벤트에 target.value를 거쳐 state를 통해 value 값인 {name}이 {setname}으로 바뀐다,

target.value

이벤트에 등록한 함수에서 이벤트 객체 e를 파라미터로 받아와서 사용할 수 있음
이 e.target은 이벤트가 발생한 DOM인 input DOM을 가리키게됨
이는 e.target.value를 조회하면 현재 input에 입력한 값이 무엇인지 알 수 있음

2.onClick

마우스로 클릭을 했을때 발생하는 이벤트

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>
  );
};

button을 누르면 onClick 이벤트가 발생하고 alert 실행, 하지만 {name}에 아무런 값도 들어있지않기 때문에 undefined을 반환

이런 경우 name이 들어오게 바꿔주어야한다

onClick = {() => alert(name)}

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