[소플] ch 8. 이벤트 핸들링

1. 이벤트 처리하기 

 

DOM의 이벤트 

 

- 클릭 이벤트를 처리할 함수를 onclick을 통해 전달

- 이벤트를 처리할 함수를 문자열로 전달

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

 

리액트에서의 이벤트 

 

- onClick으로 카멜 표기법 적용

- 이벤트를 처리할함수를 함수 그대로 전달 

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

 

이벤트 핸들러 추가 

 

- 이벤트 핸들러 = 어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수 

 

1) 클래스 컴포넌트 

 

- handleClick() 함수를 constructor()에서 bind()를 이용하여 this.handleClick에 대입 

- bind를 하는 이유는 자바스크립트에서는 기본적으로 클래스 함수들이 바운드(Bound)되지 않음 

- bind를 하지 않으면 this.handleClick은 글로벌 스코프(global scope)에서 호출되는데 글로벌 스코프에서 this.handleClick은 undefined이므로 사용할 수가 없음 

 

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 {
    handleClick = () => {
    	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() {
    	return (
        	<button onClick={()=>this.handleClick()}>
            	클릭
            </button>
        );
    }
}

 

 

2) 함수 컴포넌트 

 

- 함수 안에 다른 함수로 정의하는 방법과 arrow function을 사용하여 정의하는 방법 존재 

 

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

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

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

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

 

 

2. Arugments 전달하기 

 

1) 클래스 컴포넌트 

 

arrow function 사용

 

- 명시적으로 event를 두 번째 매개변수로 넣음 

- event = 리액트의 이벤트 객체 

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

 

Function.prototype.bind 사용

 

- event가 자동으로 id 이후의 두 번째 매개변수로 전달됨 

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

 

2) 함수 컴포넌트 

 

function MyButton(props) {
    const handleDelete(id,event) => {
        console.log(id, event.target);
    };

    return (
        <button onClick={(event) => handleDelete(1,event)}>삭제하기</button>
    );
}

 

 

3. 실습 - 클릭 이벤트 처리하기 

 

- 확인 버튼 컴포넌트를 만들고 클릭 이벤트에 이벤트 핸들러를 연동

 

ConfirmButton.jsx

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;