React + TypeScript로 구현하는 마우스 이벤트 마스터하기: 클릭, 드래그, 호버 등
2025-05-18 17:19:32reactfrontendtypescriptprogramming
마우스 이벤트의 중요성
React 애플리케이션 개발에 있어서 사용자와의 인터랙션은 매우 중요합니다. 마우스 이벤트는 버튼 클릭, 파일 드래그, 콘텐츠 위에 마우스를 올릴 때마다 사용자와 상호작용하는 핵심 요소입니다. 이번 포스트에서는 React와 TypeScript를 사용하여 마우스 이벤트를 효과적으로 다루는 방법과 다양한 실전 예제를 함께 알아보겠습니다.
React의 이벤트 시스템 이해하기
React는 고유한 합성 이벤트 시스템을 사용하여 브라우저 이벤트가 다르게 동작하지 않도록 지원합니다. 이 시스템은 성능을 보장하고, 브라우저 간의 일관성을 유지해 줍니다. 모든 HTML 요소는 다음과 같은 마우스 및 드래그 이벤트를 지원합니다.
- 클릭 이벤트:
onClick,onDoubleClick,onAuxClick - 드래그 이벤트:
onDrag,onDragStart,onDragEnd,onDragEnter,onDragLeave,onDragOver,onDrop,onDragExit - 마우스 움직임 이벤트:
onMouseDown,onMouseUp,onMouseMove,onMouseEnter,onMouseLeave,onMouseOver,onMouseOut
끌어다 놓기 예제: 수식 작성기
실전 예제로는 사용자가 숫자를 드래그하여 수식 영역으로 넣는 컴포넌트를 만들어 보겠습니다. 이 예제를 통해 드래그와 드랍 이벤트의 실제 사용법을 익힐 수 있습니다.
import React, { useState } from 'react';
const terms = [2, 4, 6, 8];
export const DragEquation = () => {
const [expression, setExpression] = useState<number[]>([]);
const onDropHandler = (e: React.DragEvent<HTMLDivElement>) => {
const value = parseInt(e.dataTransfer.getData('text'), 10);
setExpression([...expression, value]);
};
const allowDrop = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault(); // Must allow drop
};
return (
<div className="p-4">
<h3>🧠 수식 만들기</h3>
<div className="d-flex gap-2 mb-3">
{terms.map((term) => (
<div
key={term}
draggable
onDragStart={(e) => e.dataTransfer.setData('text', term.toString())}
className="px-3 py-2 bg-info text-white rounded"
>
{term}
</div>
))}
</div>
<div
onDrop={onDropHandler}
onDragOver={allowDrop}
className="p-4 border border-primary text-center"
style={{ minHeight: '60px' }}
>
여기에 드롭: {expression.join(' + ') || '---'}
</div>
</div>
);
};
마우스 이벤트 사용 시 베스트 프랙티스
e.preventDefault()활용하기: 커스텀 드롭존을 사용할 때 이벤트 기본 동작을 방지하세요.- 높은 빈도의 이벤트는 디바운스 처리:
onMouseMove같은 경우는 성능 저하의 원인이 되므로 디바운스를 통해 최적화하세요. - 익명 함수 대신 핸들러 재사용: 불필요한 재렌더링을 피하려면 핸들러를 재사용하세요.
useCallback+ 의존성 배열 활용: 상태에 의존하는 핸들러의 경우useCallback을 사용하세요.
결론
마우스 이벤트를 완벽히 마스터하면 React 앱에서 더 나은 사용자 경험을 제공합니다. 이번 포스트에서는 다양한 이벤트 핸들러를 살펴보았고, 그 사용 예제를 통해 확장 가능한 UI를 만드는 방법에 대해 논의했습니다. 이러한 이벤트들을 활용하여 더 복잡하고 상호작용적인 애플리케이션을 만들어 보세요.