참고할 블로그 :https://velopert.com/1015
자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다.

array.map(콜백함수(현재값, 현재인덱스, 현재 원본 배열), [thisArg]);

import React, { Component } from 'react';

class IterationSample extends Component {

    render() {
        const names = ['로로', '라라', '허허', '후후', '랄랄'];
        const nameList = names.map((name, index) => <li key={index}>{name}</li>)
        return (
            <div>
                <ul>
                    {nameList}
                </ul>
            </div>
        );
    }
}

export default IterationSample;

여기서 눈여겨 볼 부분은 JSX 코드로 된 배열을 새로 생성한 후 nameList에 담는다는 것.

key

컴포넌트 배열을 렌더링했을 떼 어떤 원소에 변동이 있었는지 알아내려고 사용한다. 예를들어, 유동적인 데이터를 다룰 때는 원소를 새로 생성,제거, 수정을 할 수 있다. key가 없을때 virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지한다. 하지만 key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있다. 그럼으로 key는 유니크해야 한다.