User 컴포넌트에 어떤 값이 전달되는지 확인해 봅시다. src/components 폴더에 User.tsx 파일을 생성하고 다음과 같이 코드를 작성합니다.

src/components/User.tsx

export default function User(props) { ----- ➊
  console.log(props); --------------------- ➋
  return <div>User Component</div>; ------- ➌
}

➊ props는 부모(App) 컴포넌트에서 전달한 모든 속성을 하나의 객체로 받습니다. 현재 props 밑에 빨간 밑줄이 생겨 오류 표시처럼 보입니다. 타입을 지정하지 않아서 그러는데 일단은 무시합니다.

➋ 전달받은 데이터를 console.log(props)로 콘솔에 출력합니다.

➌ 화면에 <div>User Component</div>를 렌더링합니다.

애플리케이션을 실행하고 웹 브라우저에서 command(맥OS에서는 command + option + I)를 눌러 개발자 도구를 엽니다. Console 탭을 선택하면 다음과 같이 출력됩니다. 데이터는 개별 값이 아닌 하나의 객체로 묶여 props로 전달된다는 점을 확인할 수 있습니다.