💗 Event?

✍ 특정 사건을 의미

ex) 사용자가 버튼 클릭 = 버튼 클릭 이벤트

✍ 이벤트 처리 = 이벤트를 핸들링한다

DOM EVENT

<button onclick = "activate()">
  Activate
</button>

DOM에서는 클릭 이벤트를 처리하는 함수를 DOM CLICK을 통해서 처리

React Event

<button onClick={activate}>
  Activate
</button>

onClick(카멜 케이스)으로 나타나고, 함수 그대로 처리

💗 Event Handler

🔸 Class Component에서 Event 처리

1. Bind 사용 방식

class Toggle extends React.Component {
  constructor(props){
    super(props);
    
    this.state = {isToggleOn: true };
    
    //callback에서 'this'를 사용하기 위해서는 바인드를 필수적으로 해줘야 함
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setStateprevState => ({
      isToogleOn: !prevState.isToggleOn
    }));
  }
  
  render(){
    return(
      <button onClick = {this.handleClick}>
        {this.state.isToggleOn ? '켜짐' : '꺼짐' }
      </button>
      );
  }
}

bind => JS에서는 기본적으로 Class 함수들이 바인드 되지 않아서, this를 사용할 때 bind를 하지 않으면 global scope에서 호출이 됨.
그러나, global scope에서는 함수가 정의되지 않으므로 undefinded로 나타남
즉, 함수의 이름 뒤에 괄호 없이 사용하려면 무조건 bind!

2. Bind 대신 Class fields syntax 사용

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

3. Bind, Class field 사용 대신 Arrow Function 사용

class myButton extends React.Component {
  handleClick() {
    console.log('this is', this);
  }
  
  render(){
    return(
      <button onClick={()=> this.handleClick()}>
        클릭
      </button>
      );
  }

성능문제가 있으므로 1,2번 주로 사용하는 것이 바람직

🔸 Function Component에서 이벤트 처리

1. 함수 안에 또다른 함수로 정의

function Toggle(props){
  const [isToggleOn, setIsToggleOn] = useState(true);
  
  function handleClick() {
    setIsToggleOn((isToggleOn) => !isToggleOn));
  }
  
   return(
      <button onClick = {handleClick}>
        {this.state.isToggleOn ? '켜짐' : '꺼짐' }
      </button>
      );
}

2. arrow function을 사용하여 정의

function Toggle(props){
  const [isToggleOn, setIsToggleOn] = useState(true);
  
 const handelClick=() => {
   setIsToggleOn((isToggleOn) => !isToggleOn);
 }
  
   return(
      <button onClick = {handleClick}>
        {this.state.isToggleOn ? '켜짐' : '꺼짐' }
      </button>
      );
}

이때는 onClick에 this를 사용하지 않고 곧바로 정의한 함수를 넣어줌!

💗 Argument

✍ 함수에 주장할 내용 = 함수에 저장할 데이터 = Event Handler에 전달할 데이터

💗 Parameter

✍ 매개변수

🔸 매개변수를 event handler에 전달하는 방식

1. 클래스 컴포넌트

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

2. 함수 컴포넌트

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

🔸 예시 코드

import React, {useState} from "react";

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

  const handleConfirm = () => {
    setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed);
  };
// prev는 상태를 변환하는 것!! 


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

export default ConfirmButton;