[React] - Map함수

let array = [2,3,4];
array.map(function(){
  console.log(1)
});

1번 기능 : array에 들어있는 자료갯수 만큼 코드를 반복 실행

array의 갯수(3개)만큼 1을 3번 출력하는 결과를 얻게 됩니다.
chrome 개발자도구(F12)콘솔에서 입력시 결과를 확인할 수 있습니다.

let array = [2,3,4];
array.map(function(a){
  console.log(a)
});

2번 기능 : 콜백 함수에 파라미터를 작명할시 array안에 있던 모든 자료를 하나씩 출력

array의 안에 있는 값인 2,3,4가 출력되는 모습입니다.

let array = [2,3,4]
let newArray = array.map(function(a){
return a * 10
});
console.log(newArray)

3번 기능 : return 안에 담을시 array에 담아 출력

array에 담은 변수들을 출력하여 newArray가 [20,30,40]이 출력됩니다

React- JSX안에서 HTML을 반복 생성하고 싶다면

function App (){
  return (
    <div>
      { 
        [1,2,3].map(function(){
          return ( <div>안녕</div> )
        }) 
      }
    </div>
  )
}

동작원리
[1,2,3]에 map을 붙여서 그 안의 자료 갯수 만큼 map 내부코드 실행,
return안에 안녕이 있으므로 array에 3번을 담아 출력합니다