셀프체크

Button 컴포넌트를 import한 뒤, 버튼을 클릭했을 때 실행할 함수를 handleClick이라는 속성으로 전달합니다. 이때 Button 컴포넌트는 HTML의 시작 태그와 종료 태그처럼 사용해 버튼 내부에 표시할 내용을 children으로 전달합니다.

src/App.tsx

import Button from './components/Button';

export default function App() {
  return (
    <>
      <Button handleClick={() => alert('login')}>login</Button>
      <Button handleClick={() => alert('logout')}>logout</Button>
    </>
  );
}

Button 컴포넌트에서는 부모 컴포넌트에서 전달한 children과 handleClick을 받아 <button> 요소에 적용합니다. children은 버튼 내부에 표시할 내용이고, 타입은 React.ReactNode로 지정합니다. handleClick은 클릭 이벤트 핸들러이고, 타입은 () => void입니다.