src/components/User.tsx
interface UserProps { // 인터페이스로 props 타입 분리
userObj: { name: string; age: number; };
clickHandler: () => void;
}
export default function User(props: UserProps) {
const {
userObj: { name, age },
clickHandler,
} = props;
return (
<>
<p>name: {name}</p>
<p>age: {age}</p>
<button onClick={clickHandler}>클릭</button>
</>
);
}
인터페이스로 타입을 분리하니 props의 타입이 UserProps로 깔끔하게 정리되어 함수 선언부가 훨씬 보기 쉬워졌습니다.