[리액트(React)] 이벤트 핸들러

// 이벤트 핸들러(이벤트 리스너)

- 이벤트를 실행 및 처리하는 것

- 어떤 사건이 발생하면 사건을 처리한다.

<button onClick={함수명}>

- 이벤트 함수명은 handle+행위 또는 행위+handler로 짓는 것이 일반적이다.
   ~ handleClick, clickHandler ...

- 화살표 함수  또는 익명 함수로 이벤트 함수를 정의하여 커스텀 인자를 전달할 수 있다.

// 화살표 함수
<TabButton 이벤트핸들러명={() => 함수명(인자)}/>

//익명 함수
<TabButton 이벤트핸들러명={function() {함수명(인자)}}/>

- 클래스형 컴포넌트에서는 this를 직접 바인딩 해주거나 화살표 함수를 사용하여 바인딩해야 한다.

- 함수형 컴포넌트에서는 함수 안에 함수로 정의하거나 화살표 함수를 사용하여 정의한다.

---

// 클래스형 컴포넌트

- this 직접 바인딩

import React from 'react';

const styles = {
  margin: {
    margin: 20,
  },
};

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

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

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

  render() {
    return (
      <button
        onClick={this.handleConfirm}
        disabled={this.state.isConfirmed}
        style={styles.margin}
      >
        {this.state.isConfirmed ? '확인 완료' : '확인 필요'}
      </button>
    );
  }
}

export default EventHandler;

- 화살표 함수

import React from 'react';

const styles = {
  margin: {
    margin: 20,
  },
};

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

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

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

  render() {
    return (
      <button
        onClick={this.handleConfirm}
        disabled={this.state.isConfirmed}
        style={styles.margin}
      >
        {this.state.isConfirmed ? '확인 완료' : '확인 필요'}
      </button>
    );
  }
}

export default EventHandler;

---

// 함수형 컴포넌트

import { useState } from 'react';

const styles = {
  margin: {
    margin: 20,
  },
};

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

  const handleConfirm = () => {
    setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed);
  };

  return (
    <button
      onClick={handleConfirm}
      disabled={isConfirmed}
      style={styles.margin}
    >
      {isConfirmed ? '확인 완료' : '확인 필요'}
    </button>
  );
}

export default EventHandler;