Event(이벤트)

컴퓨터 동작 과정에서 일어난 어떠한 사건
Ex) 키보드 입력, 마우스 좌클릭 등

Handler(=Listener)

이벤트를 처리하는 함수 또는 객체

DOM과 React에서 컴포넌트에 Handler를 추가하는 방법

// DOM의 Event 처리
<button onclick="activate()">
  Active
</button>

// React의 Event 처리
<button onClick={activate}>
  Active
</button>

Class Component의 경우

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = { isTogglenOn: true };
    
    // 클래스 함수를 bind
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState(prevSate => ({
      isToggleOn: !prevState.isToggleOn;
    }));
  }
  
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? '켜짐' : '꺼짐'}
      </button>
    );
  }
}

또 다른 구현 방법

class MyButton extends React.Component {
  // class field syntax
  handleClick = () => {
    console.log('this is:', this);
  }
  
  render() {
    return (
      // arrow function
      <button onClick={() => this.handleClcik()}>
        클릭
      </button>
    );
  }
}

Arrow Function처럼 구현하면 MyButton이 렌더링 될 때마다 새로운 콜백 함수가 생성된다. 대부분의 경우엔 상관 없지만, 콜백 함수가 하위 컴포넌트의 props로 넘겨지게 되면 추가적인 렌더링이 발생한다. 따라서 성능 문제를 피하기 위해 대부분 Class Field Syntax나 Bind를 쓴다.

Function Component의 경우

function Togle(props) {
  const [isToggleOn, setIsToggleOn] = useState(true);
  
  // 방법 1. 함수 안에 EventListener 정의
  function handleClick() {
    setIsToggleOn((isToggleOn) => !isToggleOn);
  }
  
  // 방법 2. Arrow Function으로 정의
  const handleClick = () => {
    setIsToggleOn((isToggleOn) => !isToggleOn);
  }
  
  return (
    <button onClick={handleClick}>
      {isToogleOn ? "켜짐" : "꺼짐"}
    </button>
  );
}

Handler에 Arguments를 전달하기

Argument: 함수에서 사용하는 데이터
Parameter : 함수에 전달할 데이터

예제 (Function Component)

funciton MyButton(props) {
  const handleDelete = (id, event) => {
    console.log(id, event.target);
  }
  
  return (
    <button onClick={(evnet) => handleDelete(1, event)}>
      삭제하기
    </button>
  );
}

---

Referance

[인프런] 처음 만난 리액트(React) 강의 - 소플