React map()

map함수

html이 반복적으로 출현하면

반복문을 이용해서 똑같은 html을 생성할 수 있다. 

그러나 React의 JSX에서는 for반복문을 사용할 수 없어 map() 를 대신 사용한다. 

 

map함수 사용법

1.map()함수는 자바스크립트의 기본함수로 모든 array자료에서 사용 가능하다. 

var array = [2,3,4];
array.map(function(){
  console.log(1)
});
// array에 들어있는 자료수 만큼 반복실행한다.

위와 같은 함수를 사용 하면 console.log(1) 이 3번 실행된다. 

 

2.콜백함수에 파라미터를 넣으면 

파라미터는 어레이 안에있는 모든 자료를 하나씩 출력한다. 

var array = [2,3,4];
array.map(function(a){
  console.log(a)
});
// 2,3,4 가 콘솔창에 출력됨

 

3. map를 변수에 담고

콜백함수의 return 에 수식을 넣으면 

변수에 값을 담아준다. 

var array = [2,3,4];
var newArray = array.map(function(a){
  return a * 10
});
console.log(newArray)
// [20,30,40] 이 출력됨

 

JSX에서 html을 반복생성하고 싶으면 

중괄호안에서 map() 를 작동한다. 

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

이렇게 하면 test 가 세번 나온다.