src/components/User.tsx
interface UserProps {
name: string;
age: number;
clickHandler: () => void;
}
export default function User(props: UserProps) {
const { name, age, clickHandler } = props;
return (
<>
<p>name: {name}</p>
<p>age: {age}</p>
<button onClick={clickHandler}>클릭</button>
</>
);
}
전개 연산자를 사용하면 코드가 간결해지고 필요한 속성만 선택적으로 전달할 수 있어 편리합니다. 실무에서도 자주 사용하므로 잘 익혀두기 바랍니다.