React의 이벤트 핸들러

✔ 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수
✔ 이벤트 리스너라고 부르기도 함

함수 컴포넌트에서의 사용

import { useState } from "react";

function ConfirmButton(){
  const [isConfirmed, setIsConfirmed] = useState(false);

  // 방법 1. 함수 안의 함수로 작성
  function handleConfirm(){
    setIsConfirmed(!isConfirmed);
  } 
  
  // 방법 2. Arrow function으로 작성
  const handleConfirm = () => {
    setIsConfirmed(!isConfirmed);
  }

  return (
    <button onClick={handleConfirm} disabled={isConfirmed}>
      {isConfirmed ? "확인됨" : "확인하기"}
    </button>
  );
}

export default ConfirmButton;

클래스 컴포넌트에서의 사용(참고만 하자)

import React from "react";

class ConfirmButtonClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      isConfirmed: false,
    };

    this.handleConfirm = this.handleConfirm.bind(this);
  }

  handleConfirm() {
    this.setState({
      isConfirmed: !this.isConfirmed,
    });
  }

  render() {
    return (
      <button onClick={this.handleConfirm} disabled={this.state.isConfirmed}>
        {this.state.isConfirmed ? "확인됨" : "확인하기"}
      </button>
    );
  }
}

export default ConfirmButtonClass;

클래스 컴포넌트에서는 bind를 꼭 해주어야 한다. 기본적으로 Javascript에서 클래스 함수는 바운드가 되지 않기 때문이다. bind를 하지 않으면 this가 함수 바깥의 글로벌 스코프(전역 범위)에서 호출 되어 this.handleConfirm이 undefined가 된다.

만약 bind가 번거롭다면 아래처럼 클래스 필드 문법을 사용할 수 있다.

import React from "react";

class ConfirmButtonClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      isConfirmed: false,
    };
  }

  handleConfirm = () => {
    this.setState({
      isConfirmed: !this.isConfirmed,
    });
  }

  render() {
    return (
      <button onClick={this.handleConfirm} disabled={this.state.isConfirmed}>
        {this.state.isConfirmed ? "확인됨" : "확인하기"}
      </button>
    );
  }
}

export default ConfirmButtonClass;

혹은 이벤트 핸들러를 넣는 곳에 Arrow function을 사용할 수도 있다.

import React from "react";

class ConfirmButtonClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      isConfirmed: false,
    };
  }

  handleConfirm() {
    this.setState({
      isConfirmed: !this.isConfirmed,
    });
  }

  render() {
    return (
      <button onClick={() => this.handleConfirm()} disabled={this.state.isConfirmed}>
        {this.state.isConfirmed ? "확인됨" : "확인하기"}
      </button>
    );
  }
}

export default ConfirmButtonClass;

Arguments(매개변수) 전달하기

✔ 함수에 전달할 데이터

함수 컴포넌트에서의 사용

function MyButton(props) {
	const handleDelete = (id, event) => { // id, event가 매개변수
    	console.log(id, event.target);
    };
    
	return (
    	<button conClick={(event) => handleDelete(1, event)}>삭제하기</button>
    );
}

클래스 컴포넌트에서의 사용

<button onClick={(event) => this.deleteItem(id, event)}>삭제하기</button>
<button onClick={this.deleteItem.bind(this, id)}>삭제하기</button>

참고 https://ko.reactjs.org/docs/handling-events.html