src/components/User.tsx

export default function User(props: { name: string; age: number }) { ----- ➊
  return (
    <>
➋

      <p>name: {props.name}</p>
      <p>age: {props.age}</p>

    </>
  );

}

➊ props의 타입을 명시합니다. 이 객체는 name(문자열)과 age(숫자) 속성을 가져야 합니다. 잘못된 타입을 전달하면 타입스크립트가 컴파일 시점에 오류를 알려줍니다.

➋ 속성에는 props.name, props.age처럼 점 표기법을 사용해 접근합니다. props는 객체이므로 해당 키를 통해 값을 꺼내 사용하는 방식입니다.

이렇게 하면 오류 없이 User 컴포넌트에 전달된 데이터를 사용할 수 있습니다. 애플리케이션을 실행하면 다음과 같이 전달된 데이터가 화면에 출력됩니다.