📚 리액트 이벤트 핸들링에 대하여

웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 한다. 리액트에서 이벤트를 다루는 것은 순수 자바스크립트 또는 제이쿼리를 사용한 웹 애플리케이션에서 이벤트를 다루는 것과 비슷하다.

리액트 장점 중 하나는 자바스크립트에 익숙하다면 쉽게 활용할 수 있다는 점이다. 따라서 HTML DOM Event를 알고 있다면 리액트의 컴포넌트 이벤트도 쉽게 다룰 수 있을 것이다. 🤨

📌 이벤트 사용시 주의 사항

1. 이벤트 이름은 카멜 표기법으로 사용한다.
   (예) onClick, onKeyUp, onChange

2. 이벤트에 실행 할 자바스크립트 코드를 전달하는 것이 아니라 함수 형태의 값을 전달.
   HTML에서 이벤트를 설정할 때 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다.

3. DOM 요소에만 이벤트를 설정할 수 있다.
   (예) div, button, input, form, span 등 같은 DOM 요소에만 가능
   우리가 직접 만든 컴포넌트에서는 설정할 수 없다.

📌 자주 사용하는 대표적인 이벤트

• onChange
• onClick
• onKeyUp
• onDoubleClick
• onRemove

import React, { useState } from "react";

const EventPractice = () => {
  //사용자명
  const [username, setUsername] = useState("");
  
  //메시지내용
  const [message, setMessage] = useState("");
  
  //변경 될 이벤트
  const onChangeUsername = (e) => setUsername(e.target.value);
  const onChangeMsg = (e) => setMessage(e.target.value);

  const onClick = () => {
    alert(username + ":" + message + "입니다.");
    setUsername("");
    setMessage("");
  };
  const onKeyPress = (e) => {
    if (e.key === "Enter") {
      onClick();
    }
  };
  return (
    <div>
      <input
        type="text"
        name="username"
        placeholder="사용자 명"
        value={username}
        onChange={onChangeUsername}
      />
      :
      <input
        type="text"
        name="message"
        placeholder="메세지내용"
        value={message}
        onChange={onChangeMsg}
        onKeyPress={onKeyPress}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
};
export default EventPractice;

여러개 input을 다루려면 바로 event 객체를 사용하는 것이 바람직하다. e.target.name 값을 사용하면 되는데, onChange 이벤트 핸들러에서 e.target.name은 해당 인풋의 name을 가르킨다.