JSX에서 이벤트 핸들링을 TypeScript로 작성하는 방법에 대해 알아보겠습니다.

1. 이벤트 핸들러 작성

이벤트 핸들러를 작성할 때는 다음과 같이 함수 선언식 또는 화살표 함수를 활용할 수 있습니다.

함수 선언식

function handleClick(event: React.MouseEvent<HTMLButtonElement>): void {
  // 이벤트 핸들러 로직 작성
}

화살표 함수

const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
  // 이벤트 핸들러 로직 작성
};

2. 이벤트 핸들러 추가

컴포넌트에서 버튼과 같은 엘리먼트에 이벤트 핸들러를 추가하는 예시입니다.

```typescript jsx import React from ‘react’;

const MyComponent: React.FC = () => { const handleClick = (event: React.MouseEvent): void => { // 이벤트 핸들러 로직 작성 };

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

export default MyComponent; ```

마무리

위의 예제에서는 TypeScript를 사용하여 JSX에서 컴포넌트에 이벤트 핸들러를 작성하는 방법을 살펴보았습니다. 이를 참고하여 프로젝트에서 원하는 이벤트 핸들링을 구현해 보십시오.