[javascript] 리액트에서 이벤트 처리 방법
리액트 애플리케이션에서 이벤트 처리는 사용자 상호작용과 관련된 중요한 부분입니다. 다양한 이벤트 유형을 다루기 위해 이벤트 핸들러를 정의하고 구현해야 합니다. 이러한 이벤트 핸들러는 이벤트 처리 및 상태 업데이트를 담당합니다.
1. 이벤트 처리 함수
이벤트 처리 함수는 일반적으로 JSX 요소의 속성으로 등록됩니다. 다음은 간단한 클릭 이벤트를 처리하는 예제입니다.
<button onClick={handleClick}>Click me</button>
위의 예제에서 handleClick
은 이벤트 처리 함수를 나타냅니다.
2. 이벤트 핸들러 구현
이벤트 핸들러는 다음과 같이 구현할 수 있습니다.
function handleClick() {
console.log('Button clicked');
}
위의 예제에서 handleClick
함수는 버튼 클릭 이벤트를 처리하고, 콘솔에 메시지를 기록합니다.
3. 상태 업데이트
이벤트 핸들러 내에서 상태를 업데이트하려면 useState
훅을 사용하여 상태를 정의하고 setState
함수를 호출해야 합니다.
import React, { useState } from 'react';
function ExampleComponent() {
const [count, setCount] = useState(0);
function handleButtonClick() {
setCount(count + 1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={handleButtonClick}>Increase Count</button>
</div>
);
}
위의 예제에서 handleButtonClick
함수는 버튼 클릭 이벤트를 처리하고 count
상태를 업데이트합니다.
이러한 방식으로, 리액트에서 이벤트를 처리하고 상태를 관리할 수 있습니다.
이러한 방식으로, 리액트에서 이벤트를 처리하고 상태를 관리할 수 있습니다.