그림 3-11 User 컴포넌트에 전달된 데이터 확인

앞에서 살펴본 것처럼 자식 컴포넌트는 props 객체를 통해 부모 컴포넌트가 전달한 데이터를 받아 사용할 수 있습니다. props는 객체이기 때문에 자식 컴포넌트에서는 객체 형식으로 접근해야 합니다.

자바스크립트에서는 props에 타입을 지정하지 않아도 실행에는 문제없습니다. 하지만 타입스크립트에서는 props 객체의 구조와 타입을 명확히 지정해주는 것이 좋습니다. 타입을 지정하지 않으면 코드 에디터의 자동 완성 기능이나 오류 검사가 제대로 동작하지 않을 수 있습니다.

User 컴포넌트의 코드를 다음과 같이 수정합니다.