#Event(사건)

- 사용자가 버튼을 클릭한 사건(버튼 클릭 이벤트)
- Event Handling : 이벤트를 처리하다

DOM의 Event(일반 HTML)

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

React의 Event

<button onClick={activate}> // 카멜표기법, 함수 그대로 전달
  Activate
</button>

카멜표기법: 첫글자는 소문자, 중간에 나오는 단어의 첫글자는 대문자.

---

#Event Handle(Event Listener)

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

바인드를 해주는 이유는 자바스크립트에서는 함수들이 기본적으로 바인드 되지 않기 때문이다
바인드를 하지 않으면 글로벌 스코프 this.handleClick은 undefine(정의되지 않음)이다

bind 설명 웹문서 링크

---

#Class fields syntax 사용

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

#Arrow function 사용

class MyButton extends React.Component {
  handleClick() {			
    console.log('this is:', this);
  }
 
  render() {
    // 이렇게 하면 `this`가 바운드됩니다.
    return (
      <button onClick={() => this.handleClick()}> // Arrow function 사용 
        클릭
	  </button>
    );
  }  
}   

MyButton 컴포넌트가 랜더링 될때마다 다른 콜백함수 생성
콜백 함수가 하위 컴포넌트에서 props로 넘어가면
하위 컴포넌트에서 추가적인 랜더링 발생

성능문제를 해결하기 위해
bind, 혹은 Class fields syntax를 사용한다

지금은 class 컴포넌트가 거의 사용되지 않기 때문에 참고로만 알고 있으면 된다

---

#함수 컴포넌트로 변환

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>
  );
} 

---

#Argument(주장, 논쟁)

- 함수에 전달할 내용, 논쟁을 말한다
- Event Handle에 전달할 Argument

#Parameter(매개변수)

- 클릭시 해당 내용의 정보 전송

<button onClick={(event) => this.deleteItem(id, event)}>삭제하기</button>
명시적으로 event를 두번째 매개변수로 넣어줌

<button onClick={this.deleteItem.bind(this, id)}>삭제하기</button>
event가 자동으로 id 이후에 두번재 매개면수로 전달된다

클래스 컴포넌트가 사용했던 방식

---

#함수 컴포넌트에서 Event Handle에 파라미터 전달

function MyButton(props) {
  const handleDelet = (id, event) => {
    console.log(id, event.target);
  };
 
  return (
    <button onClick={(event) => handleDelete(1,event)}> 
      				// event는 화면에서 나타나는 사용자가 발생시킨 이벤트를 말한다
      삭제하기
    </button>
  );
}