[React] 이벤트 핸들러 - 리액트에서 이벤트 처리하는 방법

 

DOM에서 클릭 이벤트를 사용할 땐 버튼이 눌리면 activate()라는 함수를 호출하도록 하고

DOM 클릭 이벤트를 처리할 함수를 onclick을 통해서 전달했었다.

 

<button onclick="activate()">
	또리짱
</button>

 

리액트의 이벤트 처리는 DOM의 이벤트와 다른 부분이 두 가지 있다.

1. 이벤트 이름을 카멜 표기법으로 쓴다.

카멜표기법

단어 전체적으로 소문자를 사용하지만, 맨 첫 글자를 제외한 각 합성어의 첫 글자만 대문자로 표기한다. 합성한 단어의 모양이 쌍봉낙타의 등과 비슷하다는 뜻에서 이름붙었다.

2. DOM에서는 이벤트를 처리할 함수를 문자열로 전달하지만 리액트에서는 함수 그대로 전달한다.

 

 

리액트 이벤트 처리

<button onClick={activate}>
	또리짱
</button>

 

위 코드처럼 어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수가 있는데 이것을 이벤트 핸들러라고 한다.

이벤트 발생을 계속 듣고 있다는 뜻으로 이벤트 리스너라고 부르기도 한다.

 

 

이벤트 핸들러 추가하는 법

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

 

위 코드엔 컴포넌트의 state에 isToggleOn이라는 Boolean 변수가 하나 있다.

버튼을 클릭하면 이벤트 핸들러 함수인 handleClick() 함수를 호출하도록 되어 있는데,

handleClick()함수를 정의하는 부분과 this.handleClick = this.handleClick.bind(this); 부분이 중요하다.

handleClick() 함수의 정의 부분은 일반적인 함수를 정의하는 것과 동일하게 괄호와 중괄호를 사용해서

클래스의 함수로 정의하고 있다.

이렇게 정의된 함수를 constructor()에서 bind()를 이용하여 this.handleClick에 대입해준다.

 

JSX에서 this의 의미에 대해 유의해야 하는데 bind를 하는 이유는 자바스크립트에서는

기본적으로 클래스 함수들이 바운드되지 않기 때문이다.

bind를 하지 않으면 this.handleClick은 글로벌 스코프에서 호출되는데 글로벌 스코프에서 this.handleClick은 undefined이므로 사용할 수가 없다. 이것은 리액트에만 해당되는 내용이 아니라 자바스크립트 함수의 작동원리 중 일부분이다.

따라서 일반적으로 함수의 이름 뒤에 괄호 ( () ) 없이 사용하려면 무조건 해당 함수를 bind해줘야 한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind