src/App.tsx
import Button from './components/Button';
export default function App() {
return (
<>
<Button onFive={() => alert('five')} />
</>
);
}
컴포넌트에서는 전달한 props 값을 받아 실제 DOM 요소에 연결할 수 있습니다. 예를 들어, Button 컴포넌트는 onFive를 props로 받아 onClick 이벤트와 연결해 사용할 수 있습니다.
src/components/Button.tsx
export default function Button({ onFive }: { onFive: () => void }) {
return <button onClick={onFive}>click</button>;
}
이처럼 컴포넌트는 사용자 정의 속성을 props로 받아 DOM 요소의 표준 이벤트 속성(onClick 등)에 연결하는 구조로 이벤트를 유연하게 관리할 수 있습니다.