[React] Event

컴퓨터 프로그램의 Event는 사건을 의미한다.
특정 사건이다. 사용자가 버튼을 클릭한 이벤트 등. 

그 때 필요한 동작을 해줘야한다.
이벤트 처리하는 것을 이벤트 핸들링한다고 함. 

// DOM의 Event
<button onclick="activate()">
       Activate
</button>


// React의 Event
<button onclick={activate}>
       Activate
</button>

// 동일한 동작을 하는 함수이다. 
// 표기법과 함수 전달의 방법에서 차이가 있다.
// React에선 카멜케이스를 쓴다.
// ex)camelCase

Event Handler : 이벤트 발생시 해당 이벤트를 처리하는 함수. 
Event Listener로 부르기도 한다. 
클래스함수들이 기본적으로 바운딩되지 않는다.
bind 없이 this 를 쓰면 글로벌로 호출이 되기 때문에,
함수 이름 뒤 괄호 없이 사용하려면 바인딩 해야한다.
그러지 않기 위해선 Class fields syntax 를 사용하거나 Arrow function 사용한다.
그러나 props로 넘어가 성능 이슈가 있어, 바인드나 클래스로 하는 것을 권장한다.  

함수 컴포넌트에서 이벤트를 처리하는 방법

function Toggle(props {
 const [isToggleOn, setIsToggleOn] = useState(true);

 // 방법 1. 함수 안에 함수로 정의
 function handleClick() {
    setIsToggleOn((isToggleOn) => !isToggleOn);
 }

 // 방법 2. arrow function을 사용하여 정의
 const handleClick = () => {
  setIsToggleOn((isToggleOn) => !isToggleOn);
 }

 return (
  <button onClick={handleClick}>
        {isToggleOn ? "켜짐" : "꺼짐"}
  </button>
 );
}

Event Handler 에 Arguments를 넘기는 방법
Arguments : 함수에 전달할 데이터
parameter : 매개변수 를 전달해야하기도한다. 

매개 변수 이벤트 핸드러에 전달하는 예제 

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

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