[React] Event 의 정의 및 Event 다루기

 

✔ Event

• Dom 의 Event

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

• React 의 Event

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

버튼을 누르면 activate 라는 함수를 호출한다.

 

Dom 의 Event 와 React Event 와의 차이점은 onClick 이 카멜케이스로 작성되었다는 점이다. 그리고 Dom 에서는 Event 를 처리할 함수를 문자열로 전달하지만, React 에서는 함수 전체로 전달한다.

 

 

 

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

callback 에서 `this`를 사용하기 위해서는 바인딩을 필수적으로 해줘야 한다.

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

bind 를 사용하는 방식이 번거롭게 느껴진다면 위 예제코드처럼 Class fields syntax 를 사용하면 된다.

class MyButton extends React.Component {
    handleClick() {
        console.log('this is:', this);
    }
    
    render() {
        // 이렇게 하면 `this`가 바운드 된다.
        return (
            <button onClick={() => this.handleClick()}>
                클릭
            </button>
        );
    }
}

bind 도 사용하지 않고, Class fields 문법도 사용하지 않으려면 event handler 를 넣는 곳에 Arrow function 을 사용하는 방법도 있다. ( onClick={() => this.handleClick()} )

 

 

 

✔ 함수 컴포넌트에서 Event 를 처리하는 방법

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

위에서 작성했던 Toggle 컴포넌트를 함수 컴포넌트로 표현한 것이다.

 

함수 컴포넌트 내부에서 Event handler 를 정의하는 방법은

① 함수 안에 함수로 정의하는 방법

② arrow function 을 사용하여 정의하는 방법

이 있다.

 

함수 컴포넌트에서는 Event 를 사용할 때 this 를 사용하지 않고, onClick 에 곧바로 정의한 Event Handler 를 넣어준다.

 

 

 

✔ Event Handler 에 Arguments 전달하기

• Argument : 함수(Event Handler)에 전달할 데이터 (=Parameter : 매개변수)

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

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

위의 코드 두 줄은 동일한 역할을 하지만 하나는 arrow function 을 사용했고, 다른 하나는 bind 를 사용했다.

event 라는 매개변수는 react 의 event 객체를 의미한다. 두 방법 모두 첫번째 매개변수는 id 이고 두번째 매개변수로 event 가 전달된다. arrow function 을 이용한 방법은 명시적으로 event 를 두번째 매개변수로 넣어주었고, bind 를 사용한 방법은 event 가 자동으로 id 이 후에 두번째 매개변수로 전달된다.