React(event handling)

Event handling

React에서의 이벤트 핸들링 방식은 DOM과 유사하다.

단, 몇가지의 차이점이 있는데,

• React에서는 DOM과 달리 camelCase를 사용한다.

  (ex. DOM: onclick, React: onClick)

• JSX를 사용, 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

HTML

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

React

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

간단하게 보자면 이러한 차이점이 있다.

자주 사용되는 이벤트를 예시로 살펴보자.

---

onChange

<input>, <textarea>, <select>와 같이

변경될 수 있는 입력값을 제어하는 form 엘리먼트

React에서 컴포넌트의 state로 관리하고 업데이트한다.

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

위 코드에서는 onChange 이벤트가 발생하면 e.target.value를 통해

이벤트 객체에 담겨 있는 <input> 값을 읽어올 수 있다.

컴포넌트 retrun문 안의 input 태그에 value와 onChange를 넣어주었다.

onChange는 input의 텍스트에 변화가 생길 때마다 발생하는 이벤트다.

onChange가 발생하면, {handleChange}함수가 작동,

이벤트 객체에 담긴 input 값을 setName을 통해 name으로 갱신한다.

---

onClick

onClick 이벤트는 이름 그대로 사용자가 클릭이라는 행동을 했을 때 발생하는 이벤트다.

button, <a> 등 사용자의 행동에 따라 어플리케이션이 반응해야 할 때 자주 사용되는 이벤트다.

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

위 onChange 이벤트 설명 때 사용했던 코드에 onClick 이벤트를 추가했다.

다만, 이 상태에서는 렌더링이 될 때 동시에 이벤트 핸들러가 작동한다.

이유는 onClick 이벤트에 함수 호출의 결과가 적용되기 때문이다.

이럴 때는 함수 자체를 정의해서 적용하거나,

외부에서 정의된 함수 자체를 적용해야한다.

// 함수 정의하기

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

// 함수 자체를 전달하기

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

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