컴포넌트를 반복해서 보여줘야할 때가 있다.

map 함수를 이용하여 반복 컴포넌트를 렌더링 할 수 있다.

arr.map(callback,[thisArg])

• callback: 새로운 배열의 요소를 생성하는 함수
  • 넘어가는 파라미터(각각의 순서로 넘어간다.)
    • currentValue: 현재 처리중인 요소
    • index: 처리하고있는 요소의 index값
    • array: 처리하고있는 원본 배열
• thisArg(선택항목): callback 함수 내부에서 사용할 this 래퍼런스

예)

var nums = [1,2,3,4,5];

var processed = numbers.map(function(num){ // num === currentValue
	return num*num
})

console.log(processed); // [1,4,9,16,25]

데이터 배열을 컴포넌트 배열로 반환하기

const names = ['눈사람','얼음','눈','바람'];

const nameList = names.map(name => <li>{name}<li>);
return <ul>nameList</ul>

위 코드는 key를 사용하지 않았다는 점에서 경고가 뜨는 코드이지만 작동은 되는 코드다.

key