React - map함수

반복되고 많은 html 태그들을 줄일 수 있는 방법이 있을까?
"map함수요!!"

배열.map(()=>{실행할코드})
[1,2,3,4].map((data)=>{return '몇 번 실행될까?'})
// ['몇 번 실행될까?','몇 번 실행될까?','몇 번 실행될까?','몇 번 실행될까?',]

• 콜백함수 안에 적은 코드를 배열 갯수만큼 반복 실행해준다.
• 콜백함수의 파라미터는 배열안에 있는 데이터를 가리킨다.
• return에 무언가를 적으면 배열에 배열 갯수만큼 담아준다.
• map함수를 사용할땐 {}(중괄호)으/로 감싸줘야 한다.

<실용적인 예시>

let [음식, 음식변경] = useState(["닭가슴살","부리또", "알밥"]);
{음식.map((a, i)=>{
	return (
    	<div className="food-list">
      		<h4>{음식[i]}</h4>
      	</div>
    )
})}

음식이라는 배열에서 각각의 데이터를 가져와서 음식의 자료 갯수만큼 return 안에 있는 html을 생성해준다.

• 파라미터 a : 음식이라는 배열의 데이터를 가리킴

• i : 배열의 갯수만큼 0부터 1씩 증가하는 정수이다. (배열의 데이터가 5개라면 i는 0,1,2,3,4가 됨)

  출처. 코딩애플