[처음 만난 리액트] 섹션 8. Handling Events

 

[처음 만난 리액트] 섹션 8. Handling Events

---

 

Event

 

사건. 특정 사건을 의미

 

사용자가 버튼을 클릭한 사건

버튼 클릭 이벤트

 

DOM의 Event

 

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

 

리액트의 Event

 

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

 

camelCase

 

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 {
	handleClick() {
    	console.log('this is:', this);
    }
    
    render() {
    	// 이렇게 하면 'this' 가 바운드됩니다.
        return (
        	<button onClick={() => this.handleClick()}>
            	클릭
            </button>
        );
    }
}

 

Arrow function 사용

 

Arguments 전달하기

 

Arguments : 주장, 논쟁, 말다툼

 

함수에 주장할 내용 , 함수에 전달할 데이터

 

Event handler 에 전달할 데이터

 

매개변수.

 

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

 

실습 : 클릭 이벤트 처리하기