이 메시지는 현재 User 컴포넌트가 { name: string; age: number } 타입의 props를 기대하고 있는데, { userObj: { name: string; age: number } } 형태로 전달하고 있기 때문에 타입이 맞지 않는다는 의미입니다. 오류 메시지에서 굵게 표시한 부분이 실제로 전달하는 props 객체의 타입입니다. 따라서 이 내용을 그대로 User 컴포넌트의 매개변수 타입으로 지정하면 오류가 해결됩니다. 그리고 return 문에서 props.userObj로 데이터에 접근합니다.
src/components/User.tsx
export default function User(props: { userObj: { name: string; age: number; }; }) {
return (
<>
<p>name: {props.userObj.name}</p>
<p>age: {props.userObj.age}</p>
</>
);
}
이처럼 오류 메시지를 잘 살펴보면 props 타입 정보를 확인할 수 있습니다.