React 이벤트 핸들링(Event handling)

React 의 이벤트 처리는 DOM 이벤트 처리 방식과 유사하지만 몇가지 문법 차이가 있다.

• React 에서 이벤트는 소문자대신 카멜 케이스 를 사용한다.
• JSX를 사용해 문자열이 아닌 함수로 이벤트 처리 함수를 전달한다.

HTML 에서의 이벤트 처리 방식
<button onclick="handleEvent()">Event</button>

React의 이벤트 처리 방식
<button onClick={handleEvent}>Event</button>

onChange

<input> <textarea> <select> 같은 폼 엘리먼트 ⇒ 사용자의 입력값을 제어하는데 사용
React 에서는 이러한 변경될 수 있는 입력값 을 일반적으로 컴포넌트의 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>
  )
}

⇒ onChange 이벤트 발생하면 e.target.value 로 이벤트 객체에 담겨있는 엘리먼트의 값을 읽어올 수 있음
⇒ 컴포넌트 return 문 안의 input에 onChange는 input의 텍스트가 바뀔 때마다 발생하는 이벤트
⇒ 이벤트 발생하면 handleChange 함수가 작동해 이벤트 객체에 담긴 input 값을 setState 통해 새로운 state로 갱신

onClick

사용자가 Click 행동을 했을 때 발생하는 이벤트
<button> 이나 <a> 엘리먼트로 클릭에 따라 반응해야 할 때 자주 사용하는 이벤트

onChange에 btn 추가해 클릭 시 input에 입력한 이름이 얼럿되게 만들어보기

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

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

// 함수 정의하기
return (
  <div>
    ...
    <button onClick={() => alert(name)}>Click</button>
    ...
  </div>
);

// 함수 자체 전달하기
const handleClick = () => {
  alert(name);
}

return (
  <div>
    ...
    <button onClick={hancleClick}>Click</button>
    ...
  </div>
);

팝업 만들어보기

function App() {
  const [showPopup, setShowPopup] = useState(false);
  const togglePopup = () => {
   // Popup의 open/close 상태에 따라 state가 업데이트 되게 함수 완성하기
    setShowPopup(!showPopup)
  }
  
  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
      {/*버튼 클릭 시 팝업 작동하게 button tag 완성하기*/}
      <button className="open" 
        onClick={togglePopup}> {/*여기에 onClick 추가*/}
        Open me
      </button> 
      {showPopup ? (
        <div className="popup">
          <div className="popup_inner">
            <h2>Success!</h2>
            <button className="close" onClick={togglePopup}>
              Close me
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
}