React에서 자식 컴포넌트를 생성하기 위한 배열

다음과 같은 제품 배열이 있다고 가정해 보겠습니다:

const prods = [
	{id: id(), name: 'product1', cost: 100},
	{id: id(), name: 'product2', cost: 200},
	{id: id(), name: 'product3', cost: 300},
];

배열의 데이터를 props로 전달하여 세 개의 Product 컴포넌트를 화면에 렌더링해 봅시다. 아직 반복문을 사용하지 않고 배열과 객체의 요소에 직접 접근해 보겠습니다:

function App() {
	return <div>
		<Product name={prods[0].name} cost={prods[0].cost} />
		<Product name={prods[1].name} cost={prods[1].cost} />
		<Product name={prods[2].name} cost={prods[2].cost} />
	</div>;
}

사용자 데이터를 화면에 표시하는 User 컴포넌트를 만드세요. 사용자 데이터는 이름, 성, 나이로 구성됩니다. 데이터를 세 개의 td 태그를 포함하는 tr 태그로 구성하세요.

App 컴포넌트에 다음 배열이 주어져 있습니다:

const users = [
	{id: id(), name: 'user1', surn: 'surn1', age: 30},
	{id: id(), name: 'user2', surn: 'surn2', age: 31},
	{id: id(), name: 'user3', surn: 'surn3', age: 32},
];

이 배열을 사용하여 세 명의 사용자를 출력하세요. 출력을 table 태그로 구성된 테이블로 만드세요.