[React] 7. 이벤트 핸들링

서회정

Feb 13, 2026

Contents

1. 이벤트 핸들링이란 1. Event 2. Handling 3. Event Handling 2. 이벤트 핸들링 실습 3. 이벤트 객체 1. 합성 이벤트 (Synthetic Base Event) 란

1. 이벤트 핸들링이란

1. Event

💡

웹 내부에서 발생하는 사용자의 행동

ex ) 버튼 클릭, 메세지 입력, 스크롤 등

2. Handling

💡

다루다, 취급하다, 처리하다

3. Event Handling

💡

이벤트가 발생했을 때 그것을 처리하는 것

ex ) 버튼 클릭 시 경고창 노출

2. 이벤트 핸들링 실습

저번 실습 때 만들어둔 Button 컴포넌트를 활용해보자.

button 태그에 onClick 이벤트를 추가해 준다.

해당하는 이벤트 내부에는 콘솔창에 매개변수로 받아오는 객체의 text 프로퍼티 값을 출력하는 코드를 작성해 준다.


const Button = ({ children, text, color = "" }) => {
  return (
    <button
      onClick={() => {
        console.log(text);
      }}
      style={{ color: color }}
    >
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

이벤트를 작성해 준 뒤 버튼을 클릭하면 우리가 작성한 onClick 내부의 익명함수가 잘 실행되는 것을 확인할 수 있다.

이렇게 이벤트가 발생했을 때 실행되는 함수는 이벤트를 실질적으로 처리하는 함수라 하여 이벤트 핸들러라고 부른다.

지금은 실습 단계이기 때문에 단순히 콘솔 출력 코드를 이벤트 핸들러 내에 사용하고 있지만 실무에서는 이런 이벤트 핸들러의 코드가 길어지는 경우가 많다.

그래서 가독성을 위해 이벤트 핸들러를 변수에 담아서 쓰는 경우가 많으며, 다음과 같이 사용할 수 있다.


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

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

export default Button;

⚠️ 변수에 담은 이벤트 핸들러 사용 시 주의사항

변수에 담은 이벤트 핸들러를 사용할 때 함수의 결과를 리턴하는 문법을 사용하는 실수를 하는 경우가 많은데, 이벤트 핸들러로 함수를 사용하는 경우에는 괄호를 빼고! 사용하자~

3. 이벤트 객체

💡

리액트에서 발생하는 모든 이벤트는 이벤트 핸들러 함수를 호출하면서, 호출된 이벤트 핸들러 함수에 매개변수로 이벤트 객체를 제공한다

사용중인 이벤트 핸들러의 매개변수 자리에 e라는 매개변수를 넣고 이를 출력해보자.


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

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

export default Button;

매개변수에 e로 넣은 이벤트 객체가 출력된 것을 확인해보면 다음과 같은 형태이다.

SyntheticBaseEvent 라고 적힌걸 확인할 수 있는데 이는 합성 이벤트라 한다.

1. 합성 이벤트 (Synthetic Base Event) 란

💡

모든 웹 브라우저의 이벤트 객체를 하나로 통일한 형태

브라우저별로 다른 폼을 일일히 찾아 기입하지 않아도 된다!

발생한 이벤트에 대한 모든 정보가 다 들어있다!

✅ 근데 이 합성 이벤트 객체는 왜 제공하는거지..?

궁금해서 AI에게 물어봤다..!

이벤트가 내가 예상하지 않는 방향으로 작동할 때 콘솔로 확인하고 잘못된 부분을 쉽게 찾을 수 있을듯!