[React]React 이벤트 처리

1. React 이벤트 처리

React와 HTML에서의 이벤트 처리 방식의 차이

• React에서 이벤트 핸들러 네이밍은 카멜 케이스(camelCase)로 사용
• JSX를 사용하여 이벤트 핸들러 함수를 전달

(1) HTML에서의 이벤트 처리 방식

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

(2) React 에서의 이벤트 처리 방식

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

📋 onChange

• <input> <textarea> <select> 등의 폼 엘리먼트는 사용자의 입력값을 제어할 때 사용한다.
• React에서는 위처럼 변경될 수 있는 입력값을 컴포넌트의 state로 관리하고 업데이트한다.
• onChange 이벤트가 발생 시 e.target.value 로 이벤트 객체에 담겨있는 input 값을 읽어올 수 있다. (onChange 값이 바뀔 때마다 발생하는 이벤트)
• 이벤트가 발생하면 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

• 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트이다.
• button 이나 a를 톻한 링크 이동 등이 발생할 때 자주 사용한다.

import React, { useState } from "react";
function NameForm() {
  const [name, setName] = useState("");
  
  //변경될 수 있는 입력값을 관리할 땐 onChange
  const handleChange = (e) => {
    setName(e.target.value);
  };
  
  //링크 이동 등 클릭이라는 행동이 발생할 땐 onClick
  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>
      <h3>{name}</h3>
    </div>
  );
}
export default NameForm;