[typescript] JSX에서 이벤트 핸들러에서 state 변경하는 방법

18 Dec 2023

typescript

React 애플리케이션을 개발하다 보면 JSX에서 이벤트 핸들러를 사용하여 state를 변경해야 하는 경우가 있습니다. 이때 TypeScript를 사용하여 작업하고 있다면, 이를 어떻게 처리해야 할지 알아봅시다.

1. 이벤트 핸들러 정의

먼저 이벤트 핸들러를 정의합니다. 다음은 버튼 클릭 이벤트를 처리하는 핸들러의 예시입니다.

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
};

export default MyComponent;

handleClick 함수는 버튼이 클릭되면 count 상태를 1 증가시킵니다.

2. 이벤트 핸들러 타입 정의

이제 TypeScript에서 이벤트 핸들러의 타입을 정의해야 합니다. 일반적으로 React.MouseEvent를 사용하여 MouseEvent를 처리할 수 있습니다.

import React, { useState, MouseEvent } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
};

export default MyComponent;

이제 handleClick 함수의 매개변수를 MouseEvent<HTMLButtonElement>로 정의하여 TypeScript에서 버튼 클릭 이벤트를 처리할 수 있습니다.

이제 JSX에서 이벤트 핸들러를 사용하여 state를 변경하는 방법을 알게 되었습니다. TypeScript를 사용하여 React 애플리케이션을 개발할 때 유용한 팁 중 하나입니다!