Event 핸들링

Event

• 어떤 하나의 사건을 의미한다. 예로 사용자가 버튼을 클릭하는 것이 사건, 버튼 클릭 이벤트이다.
• 이 이벤트를 다루는 것이 Event handling이다.

DOM의 Event vs React의 Event

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

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

• 위 아래 코드는 각각 돔의, 리액트의 이벤트 처리 예시이다.
• 돔에서는 onclick 속성을 통해 클릭 이벤트를 처리한다. 클릭 이벤트 발생시 후속 조치로 자바스크립트 코드 activate()를 큰 따옴표로 묶어 전달한다.
• 리액트에서도 이와 비슷하게 처리한다. 차이점은 camelCase 형식으로 onClick이라 처리하고 {}중괄호로 코드를 감싸 전달한다는 것.

Event Handler

• 이벤트를 처리하는 함수를 의미한다.

• Event Listener라고도 부른다. ```javascript class Toggle extends React.Comwponent{ constructor(props){ super(props); this.state = {isToggleOn: true}; //callback에서 this를 사용하기 위해서는 바인딩을 필수적으로 해줘야 합니다. this.handleClick = this.handleClick.bind(this); } handleClick(){ this.setState(preState => ({ isToggleOn: !prevState.isToggleOn })); }

  render(){ return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? ‘켜짐’ : ‘꺼짐’} </button >
  ); }

}

- 자바스크립트에서는 클래스 함수가 바인딩되지 않는다. 따라서 this.handleClick을 따로 바인딩을 해주지 않으면 이는 글로벌 스코프에서 호출되는데 this.handleClick은 undefind이기에 사용할 수가 없다.

ㅈ
## bind 없이 이벤트 처리하기

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

• 클래스 필드 문법을 사용하여 bind를 하지 않을 수 있다. 혹은

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

• Arrow function을 사용하면 클래스 필드 문법없이도 이벤트를 처리할 수도 있다.
• 다만 마이버튼 컴포넌트가 렌더링될 때마다 다른 콜백함수가 호출되는 문제가 생긴다.
• 따라서 만약 이 컴포넌트가 다른 컴포넌트의 하위 컴포넌트의 prop으로 넘겨진다면 하위컴포넌트에서 추가적인 렌더링이 발생된다.
• 따라서 bining이나 클래스 필드 문법을 사용하면 된다.

function 컴포넌트의 이벤트 처리

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

이벤트 핸덜러의 이벤트 파라미터 처리

클래스 컴포넌트

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

• 지금은 잘쓰지 않는 클래스 컴포넌트에서 쓰이는 이벤트 핸들러 방식이다.
• 첫번째 코드는 Arrow Function을 두번째는 bind함수를 사용하여 이벤트를 처리한다.
• 둘다 event 파라미터를 2번째 인자로 전달하는데 두번째 bind에서는 알아서 들어간다.

함수 컴포넌트

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

• 함수 컴포넌트에서는 Arrow Function으로 처리를 한다. 다만 매개변수의 순서는 상관없이 id와 event 객체를 넣어주면 된다.