Component 배열 활용

> 배열을 활용한 컴포넌트

array.map() 함수를 이용하여 컴포넌트를 구성할 수 있다.

import React from 'react'; class ListExample extends React.PureComponent {   render() {     const priceList = [1000, 2000, 3000, 4000];     const prices = priceList.map((price) => <div>가격: {price}원</div>);     return (       <div>         <label>가격 목록</label>         {prices}       </div>     );   } } export default ListExample;

 

> reder()함수의 트리 구조의 노드 반환

16.3 버전 전까지만 해도 트리 구조의 노드 1개만 반환 할 수 있었고, 여러 개의 노드를 반환하고 싶은 경우 의미 없는 최상위 노드를 추가 해야 했다. 그러나 <> </> 빈칸으로 가능한 React.Fragment 컴포넌트가 추가되어 HTML로 반환되지 않고 노드를 표현할 수 있게 되었다.

map()함수를 사용하면 자동으로 최상위 노드가 추가되어 생략가능하다.