React 이벤트 처리

• React의 이벤트 처리(이벤트 핸들링; Event handling) 방식은 DOM의 이벤트 처리 방식과 유사

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

       // HTML에서 이벤트 처리 방식
       <button onclick="handleEvent()">Event</button>
       // React의 이벤트 처리 방식
       <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 이벤트는 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트
  • 버튼이나 태그를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용하는 이벤트

//onChange 예시에 버튼을 추가하여 버튼 클릭 시 input tag 에 입력한 이름이 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>);
};

• arrow function 을 사용하여 함수를 정의하여야 해당 컴포넌트가 가진 state에 함수들이 접근 가능

  • onClick 이벤트에 alert(name) 함수를 바로 호출하면 컴포넌트가 렌더링될 때 함수 자체가 아닌 함수 호출의 결과가 onClick 에 적용

  • onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 아래와 같이 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달

    // 함수 정의하기
    
    return (
      <div>
    	...
        <button onClick={() => alert(name)}>Button</button>
    	...
      </div>);
    };
    
    // 함수 자체를 전달하기
    
    const handleClick = () => {
      alert(name);
    };
    
    return (
      <div>
          ...
        <button onClick={handleClick}>Button</button>
          ...
      </div>);
    };

    //예시
    import "./styles.css";
    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;