이벤트 처리

리액트의 이벤트 처리(이벤트 핸들링: Event handling) 방식은 DOM의 이벤트 처리 방식과 유사합니다. 단, 몇가지 문법 차이가 있습니다.

• 리액트에서 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용합니다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러: Event handler)를 전달합니다.

예를 들어, HTML에서 이벤트 처리 방식이 아래와 같다면,

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

리액트의 이벤트 처리 방식은 아래와 같습니다.

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

리액트에서 이벤트 처리하는 기본 방식은 위와 같습니다. 다음은 자주 사용되는 이벤트 처리에 대한 예시입니다.

onChange

<input> <textarea> <select>와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는데 사용됩니다. 리액트에서는 이러한 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state로 관리하고 업데이트합니다. onChange 이벤트가 발생하면 e.target.value를 통해 이벤트 객체에 담겨있는 input 값을 읽어올 수 있습니다. 컴포넌트 return 문 안의 input 태그에 value와 onChange를 넣어주었습니다. onChange는 input의 텍스트가 바뀔 때마다 발생하는 이벤트입니다. 이벤트가 발생하면 handleChange 함수가 작동하며, 이벤트 객체에 담긴 input 값을 setState를 통해 새로운 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>
  )
};

onClick

onClick 이벤트는 말 그대로 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트입니다. 버튼이나 <a>태그를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용하는 이벤트입니다. 그럼 위의 onChange예시에 버튼을 추가하여 버튼 클릭 시 Input 태그에 입력한 이름이 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>
  );
};

위와 같이 onClick 이벤트에 alert(name) 함수를 바로 호출하면 컴포넌트가 렌더링될 때 함수 자체가 아닌 함수 호출의 결과가 onClick에 적용됩니다. 때문에 버튼을 클릭할 때가 아닌, 컴포넌트가 렌더링될 때에 alert가 실행되고 따라서 그 결과인 undefined(함수는 리턴값이 없을 때 undefined를 반환합니다.)가 onClick에 적용되어 클릭했을 때 아무런 결과도 일어나지 않습니다. 따라서 onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 아래와 같이 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달해야 합니다. 단, 두 가지 방법 모두 화살표 함수를 사용하여 함수를 정의하여야 해당 컴포넌트가 가진 state에 함수들이 접근할 수 있습니다.

// 함수 정의하기

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

// 함수 자체를 전달하기

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

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

출처 : 코드스테이츠