➊ name과 age 값을 담은 객체 userObj를 정의합니다.

➋ userObj 객체를 userObj라는 속성으로 User 컴포넌트에 전달합니다.

이처럼 객체 하나를 props로 전달하면 필요한 데이터를 그 안에서 꺼내 사용할 수 있습니다. User 컴포넌트에서는 props.userObj로 해당 객체에 접근합니다.

그러면 props.userObj의 타입은 무엇일까요? 앞의 코드를 작성하면 userObj 속성에 ‘빨간색’ 밑줄이 생깁니다. 이 부분에 마우스 커서를 가져가면 Type ‘{ userObj: { name: string; age: number; }; }’ is not assignable to type ‘IntrinsicAttributes & { name: string; age: number; }’.라는 오류 메시지가 나옵니다.

그림 3-13 userObj 속성에 표시되는 오류 메시지