map 함수 사용하기

JavaScript map 사용법

React에서 반복문을 사용하는 경우에 쓰임

1. 배열에 들어있는 자료의 개수만큼 코드를 반복실행

var arr = [1,2,3];
arr.map(function(){
  alert(111); // 111이 3번 실행
});

2. 콜백함수에 파라미터를 작성하기

콜백함수에 파라미터를 작성하면 그 파라미터에 선언한 배열의 자료를 하나씩 출력

var arr = [1,2,3];
arr.map(function(a){
  alert(a); // 1,2,3 각 한번씩 총 3번 출력
});

3. 콜백함수를 리턴하면 해당 값을 배열로 담아 리턴

var arr = [1,2,3];
var test = arr.map(function(a){
 return a+10;
}); //test에 [11,12,13]이 들어감

리액트에서 사용하기

중괄호 안에서는 if, for를 사용할 수 없으므로 map을 활용

function App (){
  return (
    <div>
      { 
        [1,2,3].map(function(){
          return ( 
            <div>테스트</div>
          )
        }) 
      }
    </div>
  )
}