[javascript] 리액트에서 이벤트 처리 방법

22 Dec 2023

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 상태를 업데이트합니다.

이러한 방식으로, 리액트에서 이벤트를 처리하고 상태를 관리할 수 있습니다.

참고 자료

리액트 공식 문서