React의 이벤트 처리 소개

 

React의 이벤트 핸들링은 컴포넌트 내에서 사용자 상호작용을 처리하는 식이다.
React 애플리케이션에서 이벤트 처리 등 이벤트 시스템을 이해하고 적절히 사용하면, 효율적이고 반응이 빠른 UI를 만들 수 있다.

 

React에서 이벤트를 처리하는 방법은 HTML과 유사하지만 차이점이 있다:
React 이벤트 핸들러는 camelCase를 사용한다. 예시로, HTML의 onclick 은 React에서 onClick 이 된다.
JSX를 사용하여 문자열이 아닌 함수를 이벤트 핸들러로 전달한다.

<button onClick={this.handleClick}> // handleClick은 해당 클래스의 메서드
  Click me
</button>

 

이벤트 핸들러는 컴포넌트의 메서드로 정의된다.

 

클래스 컴포넌트에서의 이벤트 핸들러:

class MyComponent extends React.Component {
  handleClick = () => {
    // 이벤트 처리 로직
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

 

함수형 컴포넌트에서는 아래와 같이 작성한다.

function MyComponent() {
  const handleClick = () => {
    // 이벤트 처리 로직
  }

  return <button onClick={handleClick}>Click me</button>;
}

 

React의 이벤트 핸들러는 이벤트 객체를 인자로 받는다.
(JavaScript 이벤트와 유사하다)
이 객체를 사용하여 이벤트에 대한 정보를 얻거나, 이벤트의 기본 동작을 방지할 수 있다.

handleClick = (event) => {
  event.preventDefault();
  // 추가 로직
}

---

React의 이벤트 시스템은 세 가지 주요 개념에서 매우 중요하다고 볼 수 있다: 합성 이벤트, 이벤트 위임, 성능 최적화.

 

합성 이벤트(Synthetic Events): React의 합성 이벤트는 브라우저의 기본 이벤트 시스템을 추상화한 객체로, 브라우저 간의 일관된 이벤트 처리를 제공한다.
(즉, 다양한 브라우저에서 발생하는 이벤트들이 React에서는 동일한 방식으로 처리될 수 있도록 한다. 브라우저 호환성 문제를 줄여주며, 다양한 환경에서 일관된 이벤트 처리 로직을 작성할 수 있도록 해준다)

 

이벤트 위임(Event Delegation): 이벤트 위임은 특정 이벤트를 하위 컴포넌트 대신 최상위 레벨에서 처리하는 기법이다. React는 이벤트 핸들러를 실제 요소에 직접 바인딩하지 않고, 문서의 최상위 레벨에서 이벤트 리스너를 관리한다.
(이벤트 버블링을 이용하여, 이벤트가 발생한 요소로부터 상위 요소로 이벤트가 전파된다. React는 최상위에서 이 이벤트들을 캐치하고 적절한 핸들러를 실행한다)
(모든 이벤트 핸들러를 하나의 공통된장소에서 관리하는 것은 메모리 사용량을 줄이고 성능을 향상시킨다. 동적으로 추가되거나 제거되는 요소들에 대한 이벤트 핸들러 또한 별도로 관리할 필요가 없어진다.

 

성능 최적화: 합성 이벤트와 이벤트 위임은 REact에서 성능을 최적화하는 역할을 한다. 이벤트 처리 로직이 일관되고 중앙 집중적으로 관리됨으로써, 메모리 사용량이 감소하고 더 빠른 이벤트 처리가 가능해진다.
(이러한 시스템은 React의 가상 DOM과 함께 작동하여, 불필요한 DOM 조작을 최소화하고 애플리케이션의 전반적인 성능을 향상시킨다)

 

---

24년 1월 7일 작성된 글입니다