React에서 이벤트 객체 사용하기

 

React에서 사용자 입력이나 UI 상호작용을 처리할 때 이벤트는 중요한 역할을 합니다. React의 이벤트는 표준 DOM 이벤트를 추상화한 SyntheticEvent 객체를 통해 제공됩니다. 이 글에서는 React의 이벤트 객체 사용법을 살펴보고, 주요 개념과 예제를 통해 이를 효과적으로 사용하는 방법을 알아보겠습니다.

SyntheticEvent란?

React는 브라우저 간의 호환성을 보장하기 위해 SyntheticEvent라는 래퍼 객체를 사용하여 이벤트를 처리합니다. 이는 브라우저의 기본 DOM 이벤트와 유사하게 동작하지만, React의 성능 최적화를 위해 내부적으로 다르게 작동합니다.

SyntheticEvent는 표준 W3C 이벤트를 따르며, 이벤트 객체의 모든 속성과 메서드를 지원합니다. 또한 SyntheticEvent는 이벤트 풀링(event pooling) 메커니즘을 사용하여 메모리 사용량을 줄입니다.

기본 이벤트 처리

React에서 이벤트를 처리하려면 JSX 요소에 이벤트 핸들러를 추가하면 됩니다. 이벤트 이름은 camelCase를 사용하며, 이벤트 핸들러는 함수로 정의해야 합니다.

예제: 클릭 이벤트 처리

import React from 'react';

function ClickExample() {
  const handleClick = (event) => {
    console.log('Button clicked:', event);
  };

  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

export default ClickExample;

위 코드에서 handleClick 함수는 버튼 클릭 시 호출됩니다. 이벤트 객체는 event 매개변수로 전달됩니다.

SyntheticEvent의 주요 속성

SyntheticEvent 객체는 다양한 속성을 제공합니다. 그 중 자주 사용되는 속성들은 다음과 같습니다:

• type: 이벤트의 타입 (예: click, change)
• target: 이벤트가 발생한 DOM 요소
• currentTarget: 이벤트 핸들러가 연결된 DOM 요소
• preventDefault(): 기본 동작을 방지
• stopPropagation(): 이벤트 버블링 중단

예제: preventDefault와 stopPropagation

import React from 'react';

function FormExample() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted!');
  };

  const handleButtonClick = (event) => {
    event.stopPropagation();
    console.log('Button clicked!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <button onClick={handleButtonClick}>Submit</button>
    </form>
  );
}

export default FormExample;

• preventDefault()는 폼의 기본 제출 동작을 방지합니다.
• stopPropagation()은 버튼 클릭 이벤트가 부모 요소로 전파되는 것을 막습니다.

이벤트 핸들러에서 상태 업데이트

React에서 이벤트 핸들러를 사용해 상태를 업데이트할 수 있습니다. useState와 함께 사용하면 상태 관리가 가능합니다.

예제: 입력 값 업데이트

import React, { useState } from 'react';

function InputExample() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>Current value: {value}</p>
    </div>
  );
}

export default InputExample;

이 코드는 입력 필드의 값을 상태로 저장하고 화면에 표시합니다.

이벤트 객체와 함수 전달

이벤트 핸들러에 추가 매개변수를 전달하려면 함수 래핑이 필요합니다.

예제: 매개변수 전달

import React from 'react';

function ParameterExample() {
  const handleClick = (id, event) => {
    console.log(`Button ${id} clicked`, event);
  };

  return (
    <div>
      <button onClick={(e) => handleClick(1, e)}>Button 1</button>
      <button onClick={(e) => handleClick(2, e)}>Button 2</button>
    </div>
  );
}

export default ParameterExample;

이 방법을 사용하면 특정 데이터와 이벤트 객체를 함께 처리할 수 있습니다.

이벤트 풀링과 비동기 처리

React의 SyntheticEvent는 이벤트 풀링을 사용하여 메모리 사용량을 줄입니다. 이벤트 핸들러가 실행되면 이벤트 객체가 재사용되어 초기화됩니다. 따라서 비동기 함수에서 이벤트 객체를 사용할 경우, 이벤트 데이터를 복사해야 합니다.

예제: 이벤트 데이터 복사

import React from 'react';

function AsyncExample() {
  const handleClick = (event) => {
    event.persist(); // 이벤트 풀링 방지
    setTimeout(() => {
      console.log('Button clicked:', event.type);
    }, 1000);
  };

  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

export default AsyncExample;

event.persist()를 호출하면 이벤트 객체가 이벤트 풀에서 제거되고 비동기 작업에서도 안전하게 사용할 수 있습니다.

결론

React의 SyntheticEvent는 브라우저 간 호환성과 성능을 고려하여 설계된 이벤트 객체입니다. 이를 활용하면 다양한 사용자 상호작용을 효율적으로 처리할 수 있습니다. 이번 글에서 다룬 내용을 토대로 React 이벤트를 더욱 효과적으로 사용해 보세요!