이벤트 처리

React 이벤트 처리: 상세 가이드

소개

React는 사용자 인터페이스를 구축하기 위한 강력한 JavaScript 라이브러리입니다. 사용자와 상호 작용하는 동적인 웹 애플리케이션을 개발하려면 이벤트 처리가 필수적입니다. 이 글에서는 React에서 이벤트를 처리하는 방법에 대해 자세히 알아보고, 다양한 예시와 함께 핵심 개념을 설명합니다.

React 이벤트의 특징

• 합성 이벤트(Synthetic Event): React는 브라우저의 기본 이벤트 객체를 추상화하여 합성 이벤트 객체를 제공합니다. 이를 통해 브라우저 간의 차이를 해소하고, 일관된 이벤트 처리 방식을 제공합니다.
• camelCase: HTML 속성과 달리, React 이벤트는 onClick, onKeyUp과 같이 camelCase 형식으로 사용합니다.
• JSX: JSX 문법을 사용하여 이벤트 핸들러를 직접 컴포넌트에 연결할 수 있습니다.

이벤트 핸들러 작성

import React, { useState } from 'react';

function MyButton() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <button onClick={handleClick}>클릭: {count}</button>
  );
}

 

• useState 훅을 사용하여 상태를 관리합니다.
• handleClick 함수는 버튼 클릭 시 호출되는 이벤트 핸들러입니다.
• onClick 속성에 handleClick 함수를 연결하여 이벤트를 처리합니다.

 

728x90

이벤트 객체

이벤트 핸들러 함수에는 이벤트 객체가 첫 번째 인자로 전달됩니다. 이벤트 객체에는 이벤트와 관련된 다양한 정보(예: 이벤트 타입, 타겟 요소, 발생 시각 등)가 포함되어 있습니다.

const handleClick = (event) => {
  console.log(event.target.value); // 이벤트가 발생한 요소의 값
};

 

자주 사용되는 이벤트

• onClick: 클릭 이벤트
• onDoubleClick: 더블 클릭 이벤트
• onMouseOver: 마우스 오버 이벤트
• onMouseOut: 마우스 아웃 이벤트
• onChange: 입력 값 변경 이벤트
• onSubmit: 폼 제출 이벤트
• onKeyDown: 키 다운 이벤트
• onKeyUp: 키 업 이벤트

이벤트 버블링

React에서 이벤트는 자식 요소에서 부모 요소로 버블링됩니다. 이를 이용하여 부모 컴포넌트에서 자식 컴포넌트의 이벤트를 처리할 수 있습니다.

<div onClick={handleClick}>
  <button>클릭</button>
</div>

 

위 코드에서 버튼을 클릭하면 handleClick 함수가 호출됩니다.

이벤트 전파 막기

event.stopPropagation() 메서드를 사용하여 이벤트 전파를 중단할 수 있습니다.

const handleClick = (event) => {
  event.stopPropagation();
  // ...
};

 

이벤트 위임

React에서는 이벤트 위임을 사용하여 많은 수의 요소에 동일한 이벤트 핸들러를 효율적으로 연결할 수 있습니다.

<ul>
  {items.map((item) => (
    <li key={item.id} onClick={() => handleClick(item.id)}>
      {item.name}
    </li>
  ))}
</ul>

 

Form 이벤트 처리

React에서는 onChange 이벤트를 사용하여 입력 값을 관리하고, onSubmit 이벤트를 사용하여 폼 제출을 처리합니다.

<form onSubmit={handleSubmit}>
  <input type="text" onChange={handleChange} />
  <button type="submit">제출</button>
</form>

 

추가적인 고급 기능

• Custom Events: 사용자 정의 이벤트를 생성하여 컴포넌트 간에 커스텀 이벤트를 전달할 수 있습니다.
• Event Composition: 여러 이벤트 핸들러를 조합하여 복잡한 이벤트 처리 로직을 구현할 수 있습니다.

결론

React에서 이벤트 처리를 잘 이해하면 사용자와 상호 작용하는 동적인 웹 애플리케이션을 개발하는 데 큰 도움이 됩니다. 합성 이벤트, JSX, 이벤트 객체, 이벤트 버블링 등의 개념을 숙달하여 효과적인 이벤트 처리를 구현해 보세요.