🔍 한눈에 알아보기

Event란?

• 사건을 의미
• DOM과 React의 이벤트 처리 방식이 다름

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

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

Event Handler

• Event listner라고도 부름
• Event가 발생했을 때 처리하는 함수

// 함수 컴포넌트에서 event handler 사용 방법
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 ? "On" : "Off"}
        </button>
    );
}

• 매개변수를 전달해 사용할 수 있음

// 함수 컴포넌트에서 매개변수 전달 방법
function DeleteButton(props) {
	const handleDelete = (id, event) => {
    	console.log(id, event.target};
    };
    
	return (
    	<button onClick={(event) => handleDelete(1, event)}>
        	Delete
        </button>
    );
}