Event

---

프로그래밍에서 Event 는 사용자가 버튼을 클릭하는 등의 특정 사건을 의미합니다. 이벤트들이 발생했을 때 원하는 대로 처리하는 것을 "이벤트를 핸들링한다" 라고 표현합니다.

// DOM의 Event
<button onclick="activate()">
    Activate
</button>

// React의 Event
<button onClick={activate}>
    Activate
</button>

Event Handler

어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수를 Event Handler 라고 합니다. 어떤 사건이 발생하면 사건을 처리하는 역할입니다. 이벤트가 발생하는 것을 듣고 있는다는 의미로 Event Listener라고 부르기도 합니다.

Event Handler 예시 #1

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

버튼을 클릭하면 이벤트 핸들러 함수인 handleClick함수를 호출하고 있습니다. 자바스크립트에서는 기본적으로 클래스 함수들이 바운드되지 않기 때문에 함수의 이름 뒤에 괄호 없이 사용하려면 무조건 해당 함수를 바인드 해줘야 합니다.

참고 문서 - MDN : bind

위 코드를 함수 컴포넌트로 변환하면 다음과 같습니다.

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

Arguments

Event Handler에 전달할 데이터를 말합니다. 같은 의미로 Parameter도 사용되며, 매개변수라고 부르기도 합니다.

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

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