[React] 이벤트 핸들러

| 이벤트 핸들러

리액트에서 이벤트핸들러를 JSX에 추가할 수 있습니다.

이벤트 핸들러는 클릭, 마우스 호버링, 폼 입력 등과 같은

상호작용에 따라 동작하도록 하는 기능입니다.

export default function Button() {
  function handleClick() {
    console.log('클릭됨');
  }

  return (
    <button onClick={handleClick}>
      클릭
    </button>
  );
}

이런 식으로 먼저 동작에 대한 함수를 정의해 준 다음

<button>에 onClick={handleClick}를 추가해 주면 됩니다.

보통 함수 이름은 "handle"로 시작하고 뒤에 사용하는 이벤트를 적어준다고 합니다.

onClick={handleClick}, onMouseEnter={handleMouseEnter} 이런 식으로 하면 됩니다.

 

또한 JSX에서 이벤트 핸들러를 인라인으로 작성할 수도 있습니다.

<button onClick={function handleClick() {
 console.log("클릭됨");
}}>

화살표 함수(Arrow function)로 작성할 수도 있습니다.

<button onClick={() => {
  console.log("클릭됨");
}}>

| 이벤트 버블 현상

이벤트 핸들러는 자식 컴포넌트가 가지고 있는 이벤트까지 발생시켜

이를 이벤트 "bubbles" 나 "propagates"라고 합니다.

 

박스 하나가 있고 그 안에 버튼 두 개가 있다고 해봅시다.

export default function Box() {
  return (
    <div className="box" onClick={() => {
      alert('툴바가 클릭됨');
    }}>
      <button onClick={() => alert('하나')}>
        하나
      </button>
      <button onClick={() => alert('둘')}>
        둘
      </button>
    </div>
  );
}

여기서 박스 안에 있는 버튼을 클릭하면 해당 버튼에 있는 이벤트 핸들러가 실행되고,

그다음 부모 요소인 box안에 있는 이벤트핸들러 또한 실행이 됩니다.

 

이러한 버블링 현상을 막으려면 버튼 컴포넌트에 

e.stopPropagation()을 넣으면 됩니다.

function Button({ onClick, children }) {
  return (
    <button onClick={e => {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    </button>
  );
}

export default function Box() {
  return (
    <div className="box" onClick={() => {
      alert('박스가 클릭됨');
    }}>
      <Button onClick={() => alert('하나')}>
        하나
      </Button>
      <Button onClick={() => alert('둘')}>
        둘
      </Button>
    </div>
  );
}