8강.처음 만난 리액트 Handling Events

Event란?

특정한 사건을 의미한다.

예시로

Untitled

이런 우리가 버튼을 클릭하는 것도 사건(Event)이라 칭한다.

버튼 클릭 이벤트라 부르고 이걸 이벤트로 사용한다.

이런 이벤트를 처리를 잘해야 정상적으로 웹 사이트가 돌아간다.

<aside> 💡 React의 이벤트는 웹 애플리케이션에서 사용자 상호작용을 처리하는 방법입니다. HTML과 유사하지만 몇 가지 차이점이 있습니다. React는 자체 이벤트 시스템을 사용하며, 이는 합성 이벤트(Synthetic Events)라고 불립니다. 합성 이벤트는 브라우저 간 호환성을 보장하고 성능을 최적화하는 역할을 합니다.

React의 이벤트 시스템

합성 이벤트(Synthetic Events): React는 합성 이벤트 시스템을 사용하여 네이티브 브라우저 이벤트를 래핑합니다. 합성 이벤트는 모든 브라우저에서 동일하게 동작하며, 성능과 일관성을 개선합니다.
이벤트 핸들러 등록: 이벤트 핸들러는 camelCase 표기법을 사용하여 등록됩니다. 예를 들어, HTML에서 onclick은 React에서 onClick이 됩니다.
이벤트 핸들러 함수: 이벤트 핸들러는 일반적으로 함수이며, 이벤트 객체를 매개변수로 전달받습니다.

주요 이벤트 종류

React는 다양한 유형의 이벤트를 지원합니다. 여기 몇 가지 주요 이벤트를 소개합니다:

마우스 이벤트(Mouse Events): onClick, onDoubleClick, onMouseEnter, onMouseLeave, onMouseMove, onMouseDown, onMouseUp
키보드 이벤트(Keyboard Events): onKeyDown, onKeyPress, onKeyUp
폼 이벤트(Form Events): onChange, onSubmit, onFocus, onBlur
포커스 이벤트(Focus Events): onFocus, onBlur
터치 이벤트(Touch Events): onTouchStart, onTouchMove, onTouchEnd
스크롤 이벤트(Scroll Events): onScroll
드래그 이벤트(Drag Events): onDrag, onDragStart, onDragEnd, onDragOver, onDragEnter, onDragLeave, onDrop

이벤트 핸들러 사용 예시

아래는 onClick 이벤트를 사용하는 예제입니다:

jsx코드 복사
import React from 'react';

function ClickButton() {
  const handleClick = (event) => {
    console.log('Button clicked', event);
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

export default ClickButton;

이벤트 객체

이벤트 핸들러는 합성 이벤트 객체를 매개변수로 전달받습니다. 이 객체는 네이티브 이벤트와 유사한 인터페이스를 가지고 있으며, 다음과 같은 속성을 포함합니다:

target: 이벤트가 발생한 DOM 요소
type: 이벤트 유형 (예: click, keypress)
preventDefault(): 기본 이벤트 동작을 막는 메서드
stopPropagation(): 이벤트 전파를 중지하는 메서드

jsx코드 복사
import React from 'react';

function Form() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

위 예제에서 handleSubmit 함수는 event.preventDefault()를 호출하여 폼의 기본 제출 동작을 막습니다.

요약

합성 이벤트: React는 합성 이벤트 시스템을 사용하여 네이티브 이벤트를 래핑합니다.
이벤트 핸들러 등록: camelCase 표기법을 사용하여 이벤트 핸들러를 등록합니다.
이벤트 객체: 합성 이벤트 객체는 네이티브 이벤트와 유사한 인터페이스를 가지며, 추가적인 메서드를 제공합니다.

이벤트 시스템은 React 컴포넌트에서 사용자 상호작용을 처리하는 핵심 요소이며, 이를 통해 다양한 사용자 입력을 효율적으로 처리할 수 있습니다.

마우스 이벤트 (Mouse Events)

onClick: 클릭 시 호출됩니다.

jsx코드 복사
const handleClick = (event) => {
  console.log('Clicked', event);
};
<button onClick={handleClick}>Click me</button>

onDoubleClick: 더블 클릭 시 호출됩니다.

jsx코드 복사
const handleDoubleClick = (event) => {
  console.log('Double clicked', event);
};
<button onDoubleClick={handleDoubleClick}>Double Click me</button>

onMouseEnter: 마우스가 요소에 진입할 때 호출됩니다.

jsx코드 복사
const handleMouseEnter = (event) => {
  console.log('Mouse entered', event);
};
<div onMouseEnter={handleMouseEnter}>Mouse enter me</div>

onMouseLeave: 마우스가 요소를 떠날 때 호출됩니다.

jsx코드 복사
const handleMouseLeave = (event) => {
  console.log('Mouse left', event);
};
<div onMouseLeave={handleMouseLeave}>Mouse leave me</div>

onMouseMove: 마우스가 움직일 때 호출됩니다.

jsx코드 복사
const handleMouseMove = (event) => {
  console.log('Mouse moved', event);
};
<div onMouseMove={handleMouseMove}>Move your mouse here</div>

onMouseDown: 마우스 버튼을 누를 때 호출됩니다.

jsx코드 복사
const handleMouseDown = (event) => {
  console.log('Mouse down', event);
};
<div onMouseDown={handleMouseDown}>Mouse down here</div>

onMouseUp: 마우스 버튼을 뗄 때 호출됩니다.

jsx코드 복사
const handleMouseUp = (event) => {
  console.log('Mouse up', event);
};
<div onMouseUp={handleMouseUp}>Mouse up here</div>

키보드 이벤트 (Keyboard Events)

onKeyDown: 키를 누를 때 호출됩니다.

jsx코드 복사
const handleKeyDown = (event) => {
  console.log('Key down', event.key);
};
<input type="text" onKeyDown={handleKeyDown} />

onKeyPress: 키를 누를 때 호출됩니다.

jsx코드 복사
const handleKeyPress = (event) => {
  console.log('Key press', event.key);
};
<input type="text" onKeyPress={handleKeyPress} />

onKeyUp: 키를 뗄 때 호출됩니다.

jsx코드 복사
const handleKeyUp = (event) => {
  console.log('Key up', event.key);
};
<input type="text" onKeyUp={handleKeyUp} />

폼 이벤트 (Form Events)

onChange: 입력 값이 변경될 때 호출됩니다.

jsx코드 복사
const handleChange = (event) => {
  console.log('Change', event.target.value);
};
<input type="text" onChange={handleChange} />

onSubmit: 폼이 제출될 때 호출됩니다.

jsx코드 복사
const handleSubmit = (event) => {
  event.preventDefault();
  console.log('Form submitted');
};
<form onSubmit={handleSubmit}>
  <button type="submit">Submit</button>
</form>

onFocus: 요소가 포커스를 받을 때 호출됩니다.

jsx코드 복사
const handleFocus = (event) => {
  console.log('Focus', event);
};
<input type="text" onFocus={handleFocus} />

onBlur: 요소가 포커스를 잃을 때 호출됩니다.

jsx코드 복사
const handleBlur = (event) => {
  console.log('Blur', event);
};
<input type="text" onBlur={handleBlur} />

포커스 이벤트 (Focus Events)

포커스 이벤트는 폼 이벤트와 동일합니다.

onFocus: 위 예시 참조
onBlur: 위 예시 참조

터치 이벤트 (Touch Events)

onTouchStart: 터치가 시작될 때 호출됩니다.

jsx코드 복사
const handleTouchStart = (event) => {
  console.log('Touch start', event);
};
<div onTouchStart={handleTouchStart}>Touch me</div>

onTouchMove: 터치가 움직일 때 호출됩니다.

jsx코드 복사
const handleTouchMove = (event) => {
  console.log('Touch move', event);
};
<div onTouchMove={handleTouchMove}>Move your touch here</div>

onTouchEnd: 터치가 끝날 때 호출됩니다.

jsx코드 복사
const handleTouchEnd = (event) => {
  console.log('Touch end', event);
};
<div onTouchEnd={handleTouchEnd}>Lift your touch here</div>

스크롤 이벤트 (Scroll Events)

onScroll: 스크롤이 발생할 때 호출됩니다.

jsx코드 복사
const handleScroll = (event) => {
  console.log('Scroll', event);
};
<div onScroll={handleScroll} style={{ overflow: 'scroll', height: '100px' }}>
  {/* Content here to make it scrollable */}
</div>

드래그 이벤트 (Drag Events)

onDrag: 드래그할 때 호출됩니다.

jsx코드 복사
const handleDrag = (event) => {
  console.log('Dragging', event);
};
<div draggable onDrag={handleDrag}>Drag me</div>

onDragStart: 드래그를 시작할 때 호출됩니다.

jsx코드 복사
const handleDragStart = (event) => {
  console.log('Drag start', event);
};
<div draggable onDragStart={handleDragStart}>Start dragging me</div>

onDragEnd: 드래그가 끝날 때 호출됩니다.

jsx코드 복사
const handleDragEnd = (event) => {
  console.log('Drag end', event);
};
<div draggable onDragEnd={handleDragEnd}>End dragging me</div>

onDragOver: 드래그가 요소 위로 이동할 때 호출됩니다.

jsx코드 복사
const handleDragOver = (event) => {
  event.preventDefault(); // 이 이벤트를 통해 드롭을 허용합니다.
  console.log('Drag over', event);
};
<div onDragOver={handleDragOver}>Drag over me</div>

onDragEnter: 드래그된 요소가 들어올 때 호출됩니다.

jsx코드 복사
const handleDragEnter = (event) => {
  console.log('Drag enter', event);
};
<div onDragEnter={handleDragEnter}>Drag enter me</div>

onDragLeave: 드래그된 요소가 나갈 때 호출됩니다.

jsx코드 복사
const handleDragLeave = (event) => {
  console.log('Drag leave', event);
};
<div onDragLeave={handleDragLeave}>Drag leave me</div>

onDrop: 드래그된 요소를 드롭할 때 호출됩니다.

jsx코드 복사
const handleDrop = (event) => {
  event.preventDefault();
  console.log('Dropped', event);
};
<div onDrop={handleDrop} onDragOver={handleDragOver}>Drop here</div>

요약

마우스 이벤트: 클릭, 더블 클릭, 마우스 진입/이탈/이동, 마우스 버튼 누르기/떼기 등
키보드 이벤트: 키 누르기, 키 입력, 키 떼기
폼 이벤트: 입력 값 변경, 폼 제출, 포커스 받기/잃기
포커스 이벤트: 포커스 받기/잃기
터치 이벤트: 터치 시작, 터치 이동, 터치 종료
스크롤 이벤트: 스크롤 발생
드래그 이벤트: 드래그 시작, 드래그 중, 드래그 종료, 드래그 오버, 드래그 엔터, 드래그 리브, 드롭 </aside>

우리가 버튼을 클릭했을때 이걸 버튼 클릭 이벤트라고 하며

이런 이벤트를 처리하는 것을 이벤트 헨들링이라 부른다.

DOM에서의 이벤트처리

Untitled

돔에서는 onclick을 통해 이벤트 함수를 전달

Untitled

onClick으로 함수가 변경되고 두번째로 이벤트 처리할 함수를 함수 그대로 전달

Untitled

이렇게 서로 사용하는 방식이 좀 다르다.

Event Handler : 어떤 사건이 발생하면 사건을 처리하는 역할을 하고

Event가 발생했는 지 계속 확인하기도 하기 때문에 Event Listener라고도 부른다.