React - 이벤트 핸들링

이벤트 핸들러

: 이벤트가 발생했을 때 처리되는 함수

 

1. 리액트에서 이벤트를 사용할 때 주의사항

1) 이벤트 이름은 카멜 표현식을 사용

   첫 글자를 대문자로 적되, 맨 앞에 오는 글자는 소문자로 표기하는 것

    ex) onClick , onChange...

2) 이벤트 핸들러로 자바스크립트 코드를 사용할 수 없고, 함수 형태로 전달

HTML  ⇒ <button onClick="console.log('클릭되었습니다.')" />
react ⇒ <button onClick={ () => console.log('클릭되었습니다.') } />

3) 이벤트는 DOM 요소(element)에만 사용이 가능

<div onMouseOver={ () => { ... } }> ... </div> 			⇐ div는 HTML DOM 요소이므로 이벤트 설정이 가능
<MyComponent onMouseOver={ () => { ... }> ... </MyComponent> 	⇐ MyComponent는 컴포넌트이므로 이벤트 설정이 불가

2. 리액트에서 처리할 수 있는 이벤트 종류

https://legacy.reactjs.org/docs/events.html#supported-events

SyntheticEvent – React

이벤트 종류마다 처리에 필요한 정보가 다르고, 해당 정보는 이벤트 객체(이벤트 핸들러 함수의 매개변수로 전달)을 통해서 전달

 <button onClick={e => console.log('onClick', e)}>클릭</button>
<br/>
<input type="text" onKeyUp={e => console.log('onKeyUp', e)} />

3. 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트로 전달하고자하는 경우 => 

 부모 컴포넌트에 이벤트 핸들러 함수를 정의하고 자식 컴포넌트의 props 변수로 전달하면, 자식 컴포넌트는 props 

변수로 전달된 함수를 이벤트 핸들러 함수로 설정

import { Component, useState } from 'react';

function Child({ count, handlerReset }) {
  return (
    <>
      <h1>현재 카운트: {count}</h1>
      <button onClick={handlerReset}>리셋</button>
    </>
  );
}

function Parent() {
  const [count, setCount] = useState(0);
  const handlerPlusOne = () => setCount(count + 1);
  const handlerMinusOne = () => setCount(count - 1);
  const handlerReset = () => setCount(0);
  return (
    <>
      <Child count={count} handlerReset={handlerReset} />
      <h1>현재 카운트: {count}</h1>
      <button onClick={handlerPlusOne}>하나 증가</button>
      <button onClick={handlerMinusOne}>하나 감소</button>
      <button onClick={handlerReset}>리셋</button>
    </>
  );
}

function App() {
  return (
    <>
      <Parent />
    </>  
  );
}
export default App;

handlerReset함수를 부모컴포넌트에 정의하고 해당 함수를 자식 컴포넌트의 props로 전달해서 이벤트 핸들러로 설정