이벤트 핸들링

React의 이벤트 처리(이벤트 핸들링; Event handling)

DOM의 이벤트 처리 방식과 유사하나 몇 가지 문법 차이가 있다.

• React 에서 이벤트는카멜 케이스(camelCase) 를 사용.

• JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달.

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

• DOM 요소에만 이벤트를 설정할 수 있음

  • 직접만든 컴포넌트에는 이벤트를 설정할 수 없음.
    이건 그냥 이름이 onClick인 props를 MyComponent에 전달하는 것일 뿐임

      <MyComponent onClick = {doSomething} /> //잘못된 예

  • 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정 가능

      <div onClick = {this.props.onClick}> //사용가능
        {/* ...... */}
       </div>

  이벤트 종류

  Keyboard, Focus, Mouse, Wheel, onKeyPress 등 다양하지만 몇가지만 참고하겠다.

  1. onChange

  <input> <textarea> <select> 와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는 데 사용
  React 에서는 이러한 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state 로 관리하고 업데이트한다.
  

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

  const handleChange = (e) => {
    setName(e.target.value); // e.target은 대상 엘리먼트
  }

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

2. onClick

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

import React, { useState } from "react";

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

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

  const handleClick = () => {
    alert(name);
  };
  return (
    <div className="App">
      <h1>Event handler practice</h1>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={handleClick}>Button</button> //이곳!!!!!
      {/* <button onClick={() => alert(name)}>Button</button> */}
      <h3>{name}</h3>
    </div>
  );
}
export default NameForm;

주의
만약 이곳!!!의 코드를 아래와 같이 한다면?

<button onClick={alert(name)}>Button</button>

버튼을 클릭할 때가 아닌, 컴포넌트가 렌더링 될 때에 alert 이 실행되고 따라서 그 결과인 undefined (함수는 리턴 값이 없을 때 undefined 를 반환) 가 onClick 에 적용되어 클릭했을 때 아무런 결과도 일어나지 않는다. 따라서 onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달해야 한다.

마무리..

간단하게 이벤트 핸들링 하는 법을 알아 보았다. 추가적인 이벤트도 많지만 이는 필요한 것을 잘 찾아봐서 적용시키면 할 수 있을 것 같다.