[React] 이벤트 핸들링 개념정리

리액트 이벤트 핸들링이란?

리액트에서 이벤트 핸들링은 사용자의 상호작용을 감지하고 처리하는 방법이다.

웹 애플리케이션에서 버튼 클릭, 폼 제출, 키보드 입력 등 다양한 사용자 액션에 반응하기 위해 필수적인 개념이라고 할 수 있다.

(일반 JavaScript의 이벤트 핸들링과 비슷하지만, 리액트만의 특별한 문법과 규칙이 있다. => 아래에 정리해보겠다.)

---

이벤트 핸들러의 기본 문법

이벤트를 사용할 때 주의 사항/기본 문법으로는 네 가지로 추릴 수 있다.

1. 이벤트 이름은 camelCase로 작성해야한다.
   1. 예를 들어 HTML의 onclick은 리액트에서는 onClick으로 작성해야한다.
2. HTML에서는 이벤트에 실행할 자바스크립트 코드를 문자열로 전달하지만, 리액트에서는 함수 형태의 값을 전달한다.
3. DOM 요소에만 이벤트를 설정할 수 있다.
   1. 예를 들어, div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만 우리가 직접 만든 컴포넌트에는 이벤트를 설정할 수 없다.

---

다양한 종류의 이벤트 타입

리액트는 다양한 이벤트 타입을 지원한다. 사용자의 입력과 상호작용을 감지하기 위한 다양한 이벤트들을 실제 예제와 함께 자세히 살펴보자.

const EventExamples = () => {
  const handleMouseEnter = () => {
    console.log('마우스가 요소 위에 있습니다.');
  };

  const handleInputChange = (e) => {
    // onChange는 입력값이 변경되고 포커스가 해제될 때 발생
    console.log('입력값이 변경됨:', e.target.value);
  };

  const handleKeyPress = (e) => {
    // onKeyPress는 키가 눌릴 때마다 즉시 발생
    console.log('눌린 키:', e.key);
    
    // Enter 키 감지 예시
    if (e.key === 'Enter') {
      console.log('Enter 키가 눌렸습니다!');
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('폼이 제출되었습니다.');
  };

  return (
    <div>
      <div onMouseEnter={handleMouseEnter}>
        마우스를 올려보세요
      </div>
      
      <input 
        type="text"
        onChange={handleInputChange}
        onKeyPress={handleKeyPress}
        placeholder="텍스트를 입력하세요"
      />
      
      <form onSubmit={handleSubmit}>
        <button type="submit">제출</button>
      </form>
    </div>
  );
};

이 예제에서는 네 가지 주요 이벤트 타입을 살펴볼 수 있다.

• onMouseEnter는 마우스가 요소 위로 이동할 때 발생한다. 주로 호버 효과나 툴팁을 구현할 때 사용된다.
• onChange는 입력 필드의 값이 변경되고 포커스가 해제될 때 발생한다. 이는 입력값의 최종 변경을 감지하는데 유용하며, 텍스트 입력, 선택 박스, 체크박스 등 다양한 폼 요소에서 사용할 수 있다.
• onKeyPress는 키보드의 키가 눌릴 때마다 즉시 발생한다. 실시간 입력 감지나 특정 키 입력(예: Enter)을 감지하는데 사용되며, e.key 속성을 통해 어떤 키가 눌렸는지 알 수 있습니다.
• onSubmit은 폼이 제출될 때 발생한다. 주로 e.preventDefault()와 함께 사용하여 폼의 기본 제출 동작을 막고 커스텀 제출 로직을 구현한다.

---

e? 이벤트 객체 이해하기

모든 이벤트 핸들러는 이벤트 객체(e 또는 event)를 매개변수로 받는다.

이 객체는 이벤트에 대한 모든 정보를 담고 있으며, 이벤트의 성격에 따라 서로 다른 속성과 메서드를 제공한다고 이해하면 된다.

const EventObjectDemo = () => {
  const handleButtonClick = (e) => {
    // 이벤트 기본 동작 막기
    e.preventDefault();
    
    // 이벤트가 발생한 요소
    console.log('이벤트 타겟:', e.target);
    
    // 이벤트 타입
    console.log('이벤트 타입:', e.type);
    
    // 마우스 위치
    console.log('마우스 위치:', e.clientX, e.clientY);
  };

  return (
    <button onClick={handleButtonClick}>
      이벤트 객체 테스트
    </button>
  );
};

이벤트 객체(e)는 이벤트의 종류에 따라 다양한 속성과 메서드를 제공하는데 아래에 정리해보겠다.

 

공통 속성과 메서드:

• e.preventDefault(): 이벤트의 기본 동작을 취소한다. 예를 들어, 폼 제출이나 링크 클릭의 기본 동작을 막을 수 있다.
• e.stopPropagation(): 이벤트 버블링을 중단한다. 상위 요소로의 이벤트 전파를 막고 싶을 때 사용한다.
• e.target: 이벤트가 발생한 실제 DOM 요소를 가리킨다. 폼 요소의 값을 읽거나 스타일을 변경할 때 유용하다.
• e.currentTarget: 이벤트 핸들러가 부착된 요소를 가리킨다. 이벤트 위임 패턴에서 중요하게 사용된다.
• e.type: 발생한 이벤트의 종류를 문자열로 나타낸다(예: 'click', 'change', 'submit').

마우스 이벤트 관련 속성:

• e.clientX, e.clientY: 브라우저 창 기준 마우스 커서의 좌표
• e.pageX, e.pageY: 문서 전체 기준 마우스 커서의 좌표
• e.screenX, e.screenY: 모니터 화면 기준 마우스 커서의 좌표

키보드 이벤트 관련 속성:

• e.key: 눌린 키의 값
• e.keyCode: 키의 고유 코드 (deprecated이지만 여전히 사용됨)
• e.shiftKey, e.ctrlKey, e.altKey: 보조키 눌림 여부

폼 이벤트 관련 속성:

• e.target.value: 입력 필드의 현재 값
• e.target.checked: 체크박스의 선택 상태
• e.target.files: 파일 입력 필드에서 선택된 파일들