이벤트 핸들러

이벤트 처리하기

이벤트를 처리하는 함수를 이벤트 핸들러라고 한다.
컴포넌트(함수) 안에 작은 함수를 만들면 된다.

javascript

import React, { useState } from "react";

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

    const handleClick = () => {
        setIsToggleOn((isToggleOn) => !isToggleOn);
    }

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

handleClick() 처럼 함수를 정의하는 것을 arrow function(화살 함수)라고 한다.

이벤트 핸들러 다루기

이벤트 핸들러에 매개변수를 전달하는 방법을 다뤄보자.

javascript

import React, { useState } from "react";

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

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

export default Mybutton