이렇게 정의한 인터페이스를 리액트에서는 .d.ts 파일로 분리할 수 있습니다. 그러면 컴포넌트 파일이 깔끔해지고, 타입 재사용성도 높아집니다. 이러한 타입 선언 전용 파일(.d.ts)은 일반적으로 src/types 폴더에 모아 관리합니다. 이 파일은 따로 임포트(import)하지 않아도 타입을 사용할 수 있습니다.
src/types/props.d.ts
interface UserProps {
userObj: { name: string; age: number; };
clickHandler: () => void;
}
src/component/User.tsx
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>
</>
);
}