[React] React에서 이벤트 처리하는 방법

React에서 이벤트를 처리하는 방법은 전통적인 HTML에서의 방식과 유사하지만, 몇 가지 중요한 차이점이 있습니다. 이 블로그 포스트에서는 React의 이벤트 처리 방식을 자세히 살펴보고, 주요 개념과 패턴을 예제와 함께 설명하겠습니다.

1. 기본 이벤트 처리

React에서 이벤트 처리는 JSX 내에서 직접 이루어집니다.

function Button() {
  const handleClick = () => {
    console.log('버튼이 클릭되었습니다!');
  };

  return <button onClick={handleClick}>클릭하세요</button>;
}

주요 차이점:

이벤트 이름은 camelCase를 사용합니다 (예: onClick, onSubmit).
JSX에서는 함수를 문자열로 전달하지 않고, 직접 함수를 전달합니다.

2. 이벤트 객체 사용

React의 이벤트 핸들러는 합성 이벤트(SyntheticEvent) 객체를 받습니다. 이는 브라우저의 네이티브 이벤트를 감싸고 있어, 크로스 브라우저 호환성을 보장합니다.

function Input() {
  const handleChange = (event) => {
    console.log('입력값:', event.target.value);
  };

  return <input onChange={handleChange} />;
}

3. 매개변수 전달

이벤트 핸들러에 추가 매개변수를 전달해야 할 때는 화살표 함수를 사용하거나 bind를 사용할 수 있습니다.

function ItemList({ items }) {
  const handleItemClick = (id) => {
    console.log('클릭된 아이템:', id);
  };

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

4. 이벤트 기본 동작 방지

preventDefault()를 사용하여 이벤트의 기본 동작을 방지할 수 있습니다.

function Form() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('폼 제출이 방지되었습니다.');
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">제출</button>
    </form>
  );
}

5. 클래스 컴포넌트에서의 이벤트 처리

클래스 컴포넌트에서는 메서드를 이벤트 핸들러로 사용합니다. 이때 this를 바인딩해야 합니다.

class ToggleButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: false };
    // 'this'를 바인딩합니다
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({ isOn: !prevState.isOn }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

클래스 필드 문법을 사용하면 바인딩을 생략할 수 있습니다:

class ToggleButton extends React.Component {
  state = { isOn: false };

  handleClick = () => {
    this.setState(prevState => ({ isOn: !prevState.isOn }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

6. 조건부 이벤트 처리

때로는 조건에 따라 이벤트 핸들러를 적용하거나 변경해야 할 수 있습니다.

function ConditionalButton({ isDisabled }) {
  const handleClick = () => {
    console.log('버튼이 클릭되었습니다!');
  };

  return (
    <button 
      onClick={isDisabled ? undefined : handleClick}
      disabled={isDisabled}
    >
      {isDisabled ? '비활성화' : '클릭하세요'}
    </button>
  );
}

React에서 이벤트 처리는 기존 HTML의 방식과 유사하지만, JSX의 특성과 React의 합성 이벤트 시스템 때문에 몇 가지 주의할 점이 있습니다. 이벤트 이름의 camelCase 사용, 함수 참조 전달, 합성 이벤트 객체 사용 등을 기억하세요.

이러한 패턴을 잘 활용하면 React 애플리케이션에서 사용자 상호작용을 효과적으로 처리할 수 있습니다.

실제 프로젝트에서 다양한 이벤트를 처리해보면서 이 개념들을 적용해보세요!

개발