JSX에서 이벤트 핸들러를 사용하여 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달하는 방법은 Props를 통해 가능합니다.

여기서는 TypeScript를 사용하여 JSX에서 이벤트 핸들러를 통해 상위 컴포넌트로 데이터를 전달하는 방법에 대해 알아보겠습니다.

하위 컴포넌트에서 이벤트 핸들러 정의

먼저, 하위 컴포넌트에서 이벤트 핸들러를 정의합니다. 이벤트 핸들러 내에서 Props로 전달할 데이터를 포함한 콜백 함수를 호출합니다.

예를 들어, 버튼 클릭 이벤트 핸들러를 정의하는 경우:

import React from 'react';

interface ButtonProps {
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ onClick }) => {
  return <button onClick={onClick}>Click Me</button>;
};

export default Button;

상위 컴포넌트에서 하위 컴포넌트와 이벤트 핸들러 연결

이제, 상위 컴포넌트에서 하위 컴포넌트를 렌더링하고 필요한 데이터를 포함한 콜백 함수를 정의합니다.

import React from 'react';
import Button from './Button';

const ParentComponent: React.FC = () => {
  
  const handleButtonClick = () => {
    // 상위 컴포넌트로 데이터를 전달하는 작업 수행
  };

  return <Button onClick={handleButtonClick} />;
};

export default ParentComponent;

여기서 handleButtonClick 함수에서 상위 컴포넌트로 데이터를 전달하는 작업을 수행할 수 있습니다.

이와 같이, JSX에서 이벤트 핸들러를 통해 상위 컴포넌트로 데이터를 전달할 수 있습니다. 이를 통해 컴포넌트 간의 효율적인 데이터 흐름을 구현할 수 있습니다.