핸들링이벤트

이벤트

사용자가 버튼을 클릭하는 등 특정 사건을 이벤트 라고한다.
이때 이 이벤트를 처리하는것을 핸들링한다 라고한다.

<button onclick="active()">클릭</button> // dom event
<button onClick={active}>클릭</button> // react event

리액트에서 이벤트를 처리할때는 camelCase로 작성해야하고, DOM에서 이벤트를 처리할때처럼 문자열로 전달하는게아닌 함수그대로 전달해야한다.

이벤트핸들러

어떤 이벤트가 발생하면 해당 이벤트를 처리하는 함수

function Toggle(props){
  const [isToggleOn,setIsToggleOn] = useState(true);
  
  // 방법1 : 함수 안에 함수로 정의
  function handleClick(){
    setIsToggleOn((isToggleOn) => !isToggleOn);
  }
  
  // 방법2 : arrow function을 사용하여 정의
  const handelClick = () => {
    setIsToggleOn((isToggleOn) => !isToggleOn);
  }
  
  return (
    <button onClick={handleClick}>
      {isToggleOn ? "On" : "Off"}
    </button>
  )
}

이벤트핸들러에 Arguments전달하기

Arguments : 이벤트 핸들러에 전달할 데이터
parameter : 매개변수

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

이벤트핸들러 사용해보기

확인버튼을 만들어 클릭이벤트를 적용해보자.

1. 클래스컴포넌트 bind 사용

import React from "react";

class ConfirmButton extends React.Component {
  constructor(props) {
    super(props);
    // 1. 확인여부를 저장하기위해 state에 isConfirm이라는 변수를 가지고있으며 초기값은 false
    this.state = {
      isConfirm: false,
    };

    this.handleConfirm = this.handleConfirm.bind(this); // 3. bind로 처리
  }

  /* 2. 버튼에 클릭이벤트를 처리하기위해 이벤트핸들러로 
  		handleConfirm이라는 함수를 만들어 넣어줌 */
  handleConfirm() {
    this.setState((prevState) => ({
      isConfirm: !prevState.isConfirm,
    }));
  }

  render() {
    return (
      <button onClick={this.handleConfirm} disabled={this.state.isConfirm}>
        {this.state.isConfirm ? "확인함" : "확인안함"}
      </button>
    );
  }
}

export default ConfirmButton;

2. 클래스컴포넌트 Class fields syntax 사용

import React from "react";

// Class fields syntax 사용하기
class ConfirmButton extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isConfirm: false,
    };

    // bind함수제거
  }
  // arrow function으로 변경
  handleConfirm = () => {
    this.setState((prevState) => ({
      isConfirm: !prevState.isConfirm,
    }));
  };

  render() {
    return (
      <button onClick={this.handleConfirm} disabled={this.state.isConfirm}>
        {this.state.isConfirm ? "확인함" : "확인안함"}
      </button>
    );
  }
}

export default ConfirmButton;

3. 함수컴포넌트 사용

import React, { useState } from "react";

const ConfirmButtonFunction = () => {
  const [isConfirm, setIsConfirm] = useState(false);

  const handleConfirm = () => {
    setIsConfirm((prevConfirm) => !prevConfirm);
  };
  return (
    <button onClick={handleConfirm} disabled={isConfirm}>
      {isConfirm ? "확인함" : "확인안함"}
    </button>
  );
};

export default ConfirmButtonFunction;