8.event

-event

사건이라는 의미. 사용자가 버튼을 클릭하는 것(버튼 클릭 이벤트).

이벤트를 처리하는 것 = 이벤트를 핸들링 한다.

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

DOM의 event 예제

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

리액트의 event

 

-event handler

이벤트가 발생했을때 해당 이벤트를 처리하는 함수 = 이벤트 리스너

 

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.usToggleOn
        }));
    }
    
    render(){
    	return (
        	<button onClick={this.handleClick}>
            	{this.state.isToggleOn? '켜짐' : '꺼짐'}
            </button>
        );
    }
}

예시

 

만약 바인드를 하기 귀찮다면 다음과 같이 바꿀 수 있다.

 

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

 

클래스도 싫다고 하면 다음과 같은 방법이 있다.

 

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

 

단 마지막 방법은 컴포넌트가 렌더링 될 때마다 다른 콜백 함수가 생성되는 문제가 있다.

맨 위의 클래스 컴포넌트인 토글을 함수 컴포넌트로 변환하면 다음과 같다.

 

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}>
            {this.state.isToggleOn? '켜짐' : '꺼짐'}
        </button>
    );
}

 

 

-eventhandler에 arguments 전달하기 = 함수에 데이터 전달하기 = eventhandler에 전달할 데이터 = 파라미터 = 매개변수

//클래스 컴포넌트에서의 방식
<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>
    );
}

예제

 

-실습

import React from "react";

class ConfirmButton extends React.Component{
    constructor(props){
        super(props);

        //확인여부 저장
        this.state={
            isConfirmed : false
        };

        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;

ConfirmButton.jsx - 클래스 컴포넌트 형식

 

(index.js 생략)

 

 

누르면 아래와 같이 변한다.

 

해당 부분을 arrow function으로 변경해보자

 

import React from "react";

class ConfirmButton extends React.Component{
    constructor(props){
        super(props);

        //확인여부 저장
        this.state={
            isConfirmed : false
        };
    }

    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;

 

이렇게 보니 훨씬 더 간결하긴 하다.