[React] 이벤트 처리하기 - 이벤트 핸들링과 SyntheticEvent

React 이벤트 처리하기

-> 이벤트 핸들링과 SyntheticEvent

이번에는 React에서 사용자의 행동에 반응하는 방법인 이벤트(Event)와 이벤트 핸들링(Event Handling)에 대해 알아보겠습니다.

지금까지 React 컴포넌트를 만들고 Props를 통해 데이터를 전달했다면, 이번에는 사용자가 버튼을 클릭하거나 마우스를 움직이는 등의 행동에 따라 특정 기능을 실행하는 방법을 살펴보겠습니다.

1. 이벤트(Event)란?

이벤트란 웹 페이지 내부에서 발생하는 사용자의 행동이나 특정 상황을 의미합니다.

대표적인 이벤트는 다음과 같습니다.

버튼 클릭
마우스 이동
마우스 진입
키보드 입력
메시지 입력
스크롤
폼 제출

예를 들어 사용자가 버튼을 클릭하면 클릭 이벤트가 발생합니다.

사용자 버튼 클릭
       ↓
클릭 이벤트 발생
       ↓
React에서 이벤트 처리
       ↓
특정 동작 실행

2. 이벤트 핸들링(Event Handling)이란?

이벤트 핸들링이란 이벤트가 발생했을 때 그 이벤트에 대한 동작을 처리하는 것을 의미합니다.

예를 들어 다음과 같은 동작들이 이벤트 핸들링입니다.

버튼 클릭 시 콘솔에 메시지 출력
버튼 클릭 시 경고창 표시
입력창에 값을 입력하면 데이터 변경
마우스를 올리면 특정 UI 표시
스크롤하면 추가 데이터 불러오기

간단한 예를 들면 다음과 같습니다.

버튼 클릭
   ↓
클릭 이벤트 발생
   ↓
"버튼이 클릭되었습니다." 출력

React에서는 JSX 태그에 이벤트 속성을 추가하여 이벤트를 처리할 수 있습니다.

3. onClick 이벤트 사용하기

버튼을 클릭했을 때 특정 코드를 실행하려면 onClick을 사용할 수 있습니다.

예를 들어 Button 컴포넌트를 다음과 같이 작성할 수 있습니다.

const Button = ({ children, text, color = 'black' }) => {
  return (
    <button
      onClick={() => {
        console.log(`${text} 버튼이 클릭되었습니다.`);
      }}
      style={{ color: color }}
    >
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

여기서 중요한 부분은 다음 코드입니다.

onClick={() => {
  console.log(`${text} 버튼이 클릭되었습니다.`);
}}

사용자가 버튼을 클릭하면 onClick에 전달된 함수가 실행됩니다.

예를 들어 다음 버튼이 있다고 가정해 보겠습니다.

<Button text="메일" />

버튼을 클릭하면 콘솔에 다음과 같이 출력됩니다.

메일 버튼이 클릭되었습니다.

4. 이벤트 핸들러를 별도의 함수로 만들기

이벤트가 발생했을 때 실행할 코드가 많아지면 JSX 내부에 모든 코드를 작성하기보다는 별도의 함수로 분리하는 것이 좋습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const Button = ({ children, text, color = 'black' }) => {
  const onClickButton = () => {
    console.log(text);
  };

  return (
    <button
      onClick={onClickButton}
      style={{ color: color }}
    >
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

onClickButton처럼 이벤트가 발생했을 때 실행되는 함수를 이벤트 핸들러(Event Handler)라고 합니다.

흐름은 다음과 같습니다.

사용자 버튼 클릭
       ↓
onClick 이벤트 발생
       ↓
onClickButton 함수 실행
       ↓
console.log(text)

5. 함수는 실행하지 않고 전달해야 한다

React에서 이벤트 핸들러를 등록할 때 중요한 점이 있습니다.

다음과 같이 함수 이름만 전달해야 합니다.

onClick={onClickButton}

다음과 같이 작성하면 안 됩니다.

onClick={onClickButton()}

두 코드의 차이는 다음과 같습니다.

올바른 방법

onClick={onClickButton}

함수 자체를 onClick에 전달합니다.

따라서 버튼을 클릭했을 때 함수가 실행됩니다.

잘못된 방법

onClick={onClickButton()}

컴포넌트가 렌더링되는 과정에서 onClickButton() 함수를 바로 실행한 결과를 onClick에 전달하게 됩니다.

따라서 이벤트가 발생했을 때 실행할 함수를 전달하는 목적과 맞지 않습니다.

정리하면 다음과 같습니다.

이벤트 핸들러를 전달할 때는 함수 이름만 작성한다.

onClick={함수이름}

6. 화살표 함수를 이용하여 이벤트 처리하기

이벤트 핸들러에 직접 화살표 함수를 작성하는 방법도 있습니다.

<button
  onClick={() => {
    console.log('버튼이 클릭되었습니다.');
  }}
>
  버튼
</button>

또는 Props와 함께 사용할 수도 있습니다.

<button
  onClick={() => {
    console.log(`${text} 버튼이 클릭되었습니다.`);
  }}
>
  {text}
</button>

이 방법은 간단한 이벤트 처리에 편리합니다.

다만 이벤트 처리 로직이 길어지면 별도의 함수로 분리하는 것이 코드의 가독성 측면에서 좋습니다.

7. 다른 이벤트도 사용할 수 있다

React에서는 onClick 외에도 다양한 이벤트를 처리할 수 있습니다.

예를 들어 마우스가 요소 위로 들어왔을 때는 onMouseEnter를 사용할 수 있습니다.

const Button = ({ text }) => {
  const onMouseEnterButton = () => {
    console.log(`${text} 버튼에 마우스가 올라갔습니다.`);
  };

  return (
    <button onMouseEnter={onMouseEnterButton}>
      {text}
    </button>
  );
};

이벤트 속성의 이름은 React에서 camelCase 형태로 작성합니다.

예를 들면 다음과 같습니다.

이벤트React 이벤트 속성

클릭	onClick
마우스 진입	onMouseEnter
마우스 이동	onMouseMove
키 입력	onKeyDown
값 변경	onChange
폼 제출	onSubmit

8. SyntheticEvent란?

React에서 이벤트를 처리할 때 이벤트 핸들러의 매개변수를 통해 이벤트 객체를 전달받을 수 있습니다.

const onClickButton = (e) => {
  console.log(e);
};

그리고 이벤트 핸들러를 연결합니다.

<button onClick={onClickButton}>
  버튼
</button>

버튼을 클릭하면 e에 이벤트 관련 정보가 전달됩니다.

React에서는 이러한 이벤트 객체를 일반적으로 SyntheticEvent(합성 이벤트)라고 합니다.

예를 들어 다음과 같이 사용할 수 있습니다.

const Button = ({ children, text, color = 'black' }) => {
  const onClickButton = (e) => {
    console.log(e);
    console.log(text);
  };

  return (
    <button
      onClick={onClickButton}
      style={{ color: color }}
    >
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

여기서 e는 클릭 이벤트가 발생했을 때 React가 전달해 주는 이벤트 객체입니다.

9. SyntheticEvent를 사용하는 이유

웹 브라우저에는 다양한 종류가 있습니다.

대표적으로 다음과 같은 브라우저가 존재합니다.

Chrome
Safari
Edge
Firefox
Whale
Opera

과거에는 브라우저마다 JavaScript 이벤트를 처리하는 방식이나 이벤트 객체의 동작에 차이가 있어 같은 코드를 작성해도 브라우저에 따라 다르게 동작하는 문제가 발생할 수 있었습니다.

이러한 문제를 크로스 브라우징(Cross Browsing) 이슈라고 합니다.

React는 브라우저의 기본 이벤트를 그대로 사용하는 대신, 브라우저 간 차이를 일관된 방식으로 다룰 수 있도록 SyntheticEvent라는 React의 이벤트 시스템을 제공합니다.

개발자는 일반적으로 React가 제공하는 동일한 이벤트 API를 사용하여 이벤트를 처리할 수 있습니다.

구조를 간단하게 표현하면 다음과 같습니다.

Chrome   Safari   Edge   Firefox
    │        │       │       │
    └────────┴───────┴───────┘
                 │
          브라우저 이벤트 차이
                 ↓
       React SyntheticEvent 시스템
                 │
                 ↓
         일관된 방식으로 처리

따라서 여러 브라우저의 차이를 개발자가 각각 직접 고려하는 부담을 줄일 수 있습니다.

참고로 브라우저별 이벤트 객체의 속성 이름이 단순히 target, ETarget처럼 서로 다르다는 식으로 이해하기보다는, 브라우저별 이벤트 API의 구현과 동작 차이를 React가 정규화해 일관된 인터페이스를 제공한다고 이해하는 것이 더 정확합니다.

10. 이벤트 객체에서 확인할 수 있는 값

이벤트 객체에는 이벤트가 발생한 요소와 이벤트 종류 등 다양한 정보가 포함되어 있습니다.

예를 들어 다음과 같이 확인할 수 있습니다.

const onClickButton = (e) => {
  console.log(e);
  console.log(e.target);
};

e.target을 통해 이벤트가 발생한 대상 요소를 확인할 수 있습니다.

사용자가 Button 클릭
         ↓
이벤트 발생
         ↓
onClickButton(e)
         ↓
e.target 확인
         ↓
이벤트가 발생한 요소 확인

이벤트 객체를 활용하면 클릭한 요소의 정보나 입력값 등 다양한 이벤트 정보를 처리할 수 있습니다.

11. 전체 코드 정리

지금까지 작성한 Button 컴포넌트를 정리하면 다음과 같습니다.

const Button = ({ children, text, color = 'black' }) => {
  const onClickButton = (e) => {
    console.log(e);
    console.log(`${text} 버튼이 클릭되었습니다.`);
  };

  return (
    <button
      onClick={onClickButton}
      style={{ color: color }}
    >
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

버튼을 클릭하면 다음 과정으로 동작합니다.

Button 클릭
    ↓
onClick 이벤트 발생
    ↓
onClickButton 실행
    ↓
이벤트 객체 e 전달
    ↓
이벤트 관련 정보 및 text 출력

마무리

이번에는 React에서 사용자의 행동을 처리하는 이벤트 핸들링에 대해 알아보았습니다.

정리하면 다음과 같습니다.

이벤트는 웹 페이지에서 발생하는 사용자의 행동이나 특정 상황을 의미한다.
버튼 클릭, 입력, 스크롤, 마우스 이동 등이 이벤트에 해당한다.
이벤트 핸들링은 이벤트가 발생했을 때 특정 동작을 처리하는 것이다.
React에서는 onClick, onChange, onMouseEnter 등의 이벤트 속성을 사용한다.
이벤트 핸들러는 onClick={onClickButton}처럼 함수 자체를 전달해야 한다.
onClick={onClickButton()}처럼 함수를 즉시 실행하면 안 된다.
간단한 로직은 화살표 함수로 직접 작성할 수 있다.
이벤트 처리 로직이 길어지면 별도의 함수로 분리하는 것이 좋다.
React는 브라우저 이벤트를 일관된 방식으로 다룰 수 있도록 SyntheticEvent 시스템을 제공한다.
이벤트 핸들러의 매개변수 e를 통해 이벤트 관련 정보를 확인할 수 있다.

이벤트 핸들링을 배우면 이제 React 화면에 사용자의 행동을 반영할 수 있습니다.

다음 단계에서는 이벤트와 함께 React의 핵심 개념인 State(상태)를 사용하여, 버튼 클릭과 같은 사용자 행동에 따라 화면의 데이터를 변경하고 다시 렌더링하는 방법을 알아볼 수 있습니다.

저작자표시 비영리 변경금지 (새창열림)