React 루프에서의 자식 컴포넌트
이제 우리의 컴포넌트들을 루프에서 출력해 보겠습니다.
이를 위해 map 메서드를 사용합니다:
function App() {
const result = prods.map(prod => {
return <Product name={prod.name} cost={prod.cost} />;
});
return <div>
{result}
</div>;
}
key 속성을 지정하는 것을 잊지 맙시다:
function App() {
const result = prods.map(prod => {
return <Product key={prod.id} name={prod.name} cost={prod.cost} />;
});
return <div>
{result}
</div>;
}
사용자들이 루프를 통해 출력되도록 이전 작업을 수정하세요.
