서론

🎯 이벤트 핸들러를 작성하는 다양한 방법
🎯 상위 구성 요소에서 이벤트 처리 논리를 전달하는 방법
🎯 이벤트 전파 방법 및 중지 방법

본론

이벤트 핸들러를 작성하는 다양한 방법들

1. 핸들러 함수를 별도로 선언하기

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

export default Button;

2. JSX에 인라인 형식으로 선언하기

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

export default Button;

형식에 정답은 없으며 짧은 함수일 경우 인라인 형식이 더욱 편리할 수도 있다.

💡 이벤트 핸들러에 함수 전달 시 주의해야할 점

흔히 하는 실수 중 하나가 함수 전달 시, 호출 형식으로 전달하는 것이다.

올바른 방식 (함수 전달)

<button onClick={handleModal}>
<button onClick={() => console.log('')}>

잘못된 방식 (함수 호출)

<button onClick={handleModal()}>
<button onClick={console.log('')}>

잘못된 방식으로 선언할 경우, <button/> 요소를 return 하는 컴포넌트가 렌더링 될 때 onClick prop 에 할당된 함수가 최초 1회 호출되기 때문에 사용자가 의도하지 않은 이벤트가 발생할 수 있으므로 주의해야한다.

이벤트 핸들러의 prop 명 지정하기

종종 자식 컴포넌트에 대한 이벤트 핸들러 함수를 상위 부모 컴포넌트에서 선언할 필요가 있을 때, prop 으로 핸들러 함수를 전달할 수 있다.

const Button = ({ onClick }) => (
	<button onClick={onClick}>
    	확인
    </button>
)

const DeviceModal = () => {
  const getFetchData = () => {
  	(...)
  } 
  
  return (
  	<>
      <Button onClick={getFetchData}/>
    </>
  )
}

이벤트 전파하기

const Controller = () => {
  return (
    <div className="Controller" onClick={() => {
      alert('컨트롤러를 클릭하였습니다!');
    }}>
      <button onClick={() => alert('실행하기')}>
        Excute
      </button>
      <button onClick={() => alert('초기화')}>
        Reset
      </button>
    </div>
  );
}
export default Controller;

위의 코드에서처럼 하나의 부모 <div/> 요소와 두 개의 버튼에 각각 onClick 이벤트가 지정되어 있다고 가정했을 때, 특정 버튼을 클릭하면 다음과 같은 프로세스로 실행될 것이다.

1. <button> 에 지정되어 있는 onClick 이벤트 핸들러 함수 호출
2. <div>에 지정되어 있는 onClick 이벤트 핸들러 함수 호출

즉, 가장 아래에 있는 자식 요소의 이벤트 핸들러가 먼저 실행된 후 바로 상위 부모 요소의 이벤트 핸들러가 실행되는 것이다.
이러한 현상을 보통 이벤트 전파(Event propagation) 또는 이벤트 거품(Event bubbles) 라고 하며, 이는 사용자에게 필요하지 않은 정보까지 제공하기 때문에 사용자 경험(UX) 측면에서 나쁜 점수를 줄 수 있다.

이벤트 전파 중지하기

이러한 이벤트 전파 현상을 방지하는 방법은 물론 존재하며, 방법은 다음과 같다.

const Controller = () => {
  return (
    <div 
      className="Controller"
      onClick={(e) => { 
+      	e.stopPropagation();
      	alert('컨트롤러를 클릭하였습니다!');
      }}
    >
      <button onClick={() => alert('실행하기')}>
        Excute
      </button>
      <button onClick={() => alert('초기화')}>
        Reset
      </button>
    </div>
  );
}
export default Controller;

바로 이벤트 객체를 활용하여 stopPropagation() 메서드를 이용하는 것이다.

이벤트 핸들러는 이벤트 객체를 유일한 인수로 받습니다 . 관례적으로 e는 “이벤트”를 의미하는 것으로 사용되고 있다. 이 개체를 사용하여 이벤트에 대한 정보를 읽을 수 있다.

기본 동작 방지

내부의 버튼을 클릭할 때 기본적으로 submit 이벤트가 발생하는form 과 같이 기본 동작이 내재되어 있는 요소들이 있다.
이러한 기본 동작을 방지해하는 경우, 이벤트 객체의 preventDefault() 메서드를 호출하여 해결할 수 있다.

const Signup = () => {
  return (
    <form onSubmit={e => {
      e.preventDefault();
      alert('Submitting!');
    }}>
      <input />
      <button>Send</button>
    </form>
  );
}

export default Signup;