React Event handling

Event handling이란?

• 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것(버튼 클릭, 키보드 입력, 제출 등)을 이벤트라고 한다.
• React의 이벤트 처리(Event handling) 방식은 DOM의 이벤트 처리 방식과 매우 유사하지만 몇 가지 문법 차이가 있다.

이벤트 처리 방식

1. 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용한다.
   예시) onclick X, onClick O
2. JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(Event handler)를 전달한다.
   예시) "handleClick()" X, {handleClick} O

// HTML
<button onclick="handleClick()">Event</button>

// React
<button onClick={handleClick}>Event</button>

onChange

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

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

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

• <input> <textarea> <select> 와 같은 Form 엘리먼트는 사용자의 입력값을 제어하는 데 사용되며 React에서는 이러한 변경될 수 있는 입력값을 state로 관리하고 업데이트한다.
• input 태그 안의 onChange는 input의 텍스트가 바뀔 때마다 발생하는 이벤트이다.
• onChange 이벤트가 발생하면 handleChange 함수의 e.target.value를 통해 이벤트 객체에 담겨있는 input 값을 읽어올 수 있다.
• 이벤트가 발생하면 handleChange 함수가 작동하며 이벤트 객체에 담긴 input 값을 setState를 통해 새로운 state로 갱신한다.

onClick

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

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

  return (
    <>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={() => alert(name)}>Button</button>
      <h1>{name}</h1>
    </>
  );
};

• onClick 이벤트는 사용자가 클릭을 했을때 발생하는 이벤트이다.
• <button> <a> 태그와 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용하는 이벤트이다.
• 위의 onChange 예시에 버튼을 추가하여 클릭할 경우 사용자가 input에 입력한 name을 알림 팝업에 나타나도록 추가한 코드이다.

select

function SelectFruit() {
  const [choice, setChoice] = useState("apple");

  const fruits = ["apple", "orange", "pineapple", "strawberry", "grape"];
  const options = fruits.map((fruit) => {
    return <option value={fruit}>{fruit}</option>;
  });
  
  const handleFruit = (e) => {
    setChoice(e.target.value
  };

  return (
    <>
      <select onChange={handleFruit}>{options}</select>
      <h3>You choose "{choice}"</h3>
    </>
  );
}

• <select>는 사용자가 drop down 목록을 열어 그중 한 가지 옵션을 선택하면 선택된 옵션이 state 변수에 갱신되는 이벤트이다.

Event handler 사용 시 주의할 점

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

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

*함수는 리턴 값이 없을 때 undefined 를 반환한다.

return문 안에서 함수를 정의

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

리턴문 외부에서 함수 정의 후 이벤트에 함수 전달

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

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