src/App.tsx

import User from './components/User';

export default function App() {

  return <User name='철수' age={20} />;

}

리액트에서는 부모 컴포넌트가 자식 컴포넌트에 전달한 모든 속성을 하나의 객체로 모아서 자식 컴포넌트로 전달합니다. 부모 컴포넌트에서 User 컴포넌트에 name과 age를 전달하더라도 리액트 내부에서는 이 데이터를 다음과 같이 단일 객체 형태로 전달합니다. 이 객체를 props 객체라고 합니다. 즉, props는 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 모든 데이터가 담긴 객체입니다.

{
  name: '철수',
  age: 20
}

자식 컴포넌트는 전달받은 props 객체를 함수의 매개변수로 받습니다. 매개변수 이름은 props를 사용하지만, 꼭 정해진 건 아니며 다른 이름을 사용할 수도 있습니다.