8강. Handling Events

Event의 정의 및 Event 다루기

Event : 특정사건, 사용자가 버튼을 클릭한 사건

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

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

 

Event Handler(Event Listener) : 이벤트가 발생했을 때 이벤트를 처리하는 함수

class Toggle extends React.Component{
  constructor(props){
    super(props);
    this.state = { isToggleOn: true };
    
    //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>
    );
  }
}

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

class MyButton extends React.Component{	//렌더링될 때마다 다른 callback 함수 생성 오류있음(성능저하)
  handleClick = () => {
    console.log('this is:', this);
  }
  render(){
    //Arrow function 사용, this 바운드됨
    return(
      <button onClick = {() => this.handleClick()} >
        클릭
      </button>
    );
  }
}

 

function Toggle(props){
  const [isToggleOn, setIsToggleOn] = useState(true);
  
  //1. 함수안에 함수로 정의
  functin handleclick(){
    setIsToggleOn((isToggleOn) => !isToggleOn );
  }
  
  //2. arrow function을 사용하여 정의
  const handleclick = () => {
    setIsToggleOn((isToggleOn) => !isToggleOn);
  }
  return(
    <button onclick={handleClick}>
      {isToggleOn ? '켜짐' : '꺼짐'}
    </button>
  );
}

 

Arguments 전달하기

argument : 함수(eventhandler)에 전달할 데이터 (=parameter, 매개변수)

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

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

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

 

(실습) 클릭 이벤트 처리하기

//class형 컴포넌트
import React from "react";

class ConfirmButton extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isConfirmed: false,
        };
    }
    
    //class fields syntax 사용하기
    // this.handleConfirm = this.handleConfirm.bind(this);
    
    handleConfirm(){
        this.setState((prevState) => ({
            isConfirmed: !prevState.isConfirmed,
        }));
    }
    render(){
        return(
            <button
                onClick={this.handleConfirm}
                disabled={this.state.isConfirmed}
            >
                {this.state.isConfirmed ? "확인됨" : "확인하기"}
            </button>
        )
    }
}
export default ConfirmButton;


//함수형 컴포넌트
import React, {useState} from "react";

function ConfirmButton(props){
    const [isConfirmed, setIsConfirmed] = useState(false);
    const handleConfirm = () => {
        setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed);
    };
    return(
        <button onClick={handleConfirm} disabled={isConfirmed}>
            {isConfirmed ? "확인됨" : "확인하기"}
        </button>
    );
}

export default ConfirmButton;