TypeScript로 React 이벤트 핸들러 타입 설정할 때의 고민(Feat. MouseEventHandler, MouseEvent)

React에서 onClick 이벤트 핸들러를 정의할 때, 이벤트 객체의 타입을 지정하는 방법은 두 가지 주요 접근 방식이 있습니다. 하나는 React.MouseEventHandler를 사용하는 것이고, 다른 하나는 React.MouseEvent를 직접 사용하는 것입니다. 각 방법의 장단점을 살펴보겠습니다.

React.MouseEventHandler 사용

React.MouseEventHandler는 특정 DOM 요소에서 발생하는 마우스 이벤트를 처리하기 위한 핸들러 타입입니다. 이 타입은 React.MouseEvent를 인자로 받는 함수 타입을 정의합니다.

const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
  // ...
};

• 장점:

  • 명확하게 이벤트 핸들러 함수임을 표시합니다.
  • DOM 요소 타입을 제네릭으로 지정할 수 있어, 해당 요소에 특화된 이벤트 속성에 접근할 수 있습니다.

• 단점:

  • 비교적 더 긴 타입 정의가 필요할 수 있습니다.

React.MouseEvent 사용

React.MouseEvent는 마우스 이벤트에 대한 정보를 담고 있는 이벤트 객체의 타입입니다. 이 타입을 직접 이용해 함수의 인자 타입을 정의할 수 있습니다.

const handleClick = (
  event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
  // ...
};

• 장점:

  • 이벤트 객체에 직접적으로 접근하므로, 이벤트에 관련된 정보에 초점을 맞출 수 있습니다.
  • 이벤트 객체의 타입을 명확하게 지정하여, 타입 안정성을 높일 수 있습니다.

• 단점:

  • 핸들러가 마우스 이벤트를 처리한다는 것이 명시적으로 드러나지 않을 수 있습니다.

어느 것이 나은가?

• 코드의 명확성: React.MouseEventHandler는 이벤트 핸들러 함수임을 더 명확하게 만듭니다.
• 타입의 구체성: React.MouseEvent를 직접 사용하면 이벤트 객체에 대한 더 구체적인 타입 정보를 제공합니다.
• 개인의 선호와 상황: 특정 상황이나 개인의 코딩 스타일에 따라 선택할 수 있습니다. 두 방법 모두 타입스크립트와 React에서 일반적으로 사용되고 효과적입니다.

결국, 두 방법 모두 올바른 방법이며, 프로젝트의 요구사항이나 개인의 코딩 스타일에 따라 선택하면 됩니다. 코드의 일관성을 위해 프로젝트 전반에서 하나의 접근 방식을 선호하는 것이 좋습니다.