[react] map 함수 (+자바스크립트) / 반복문에 key값

map() : array 내의 모든 데이터에 똑같은 작업을 시켜 주고 싶을 때

 

 

1) 모든 array 에 2를 모두 곱하고 싶을 때

var array = [2, 3, 4];

var newArray = array.map(function(a) {
	return a * 2;
});

//4, 6, 8

 

2) div안에서 map 사용

function App (){
  return (
    <div>
      { Items.map(function(){
        return (<div>안녕</div>)
      }) }
    </div>
  )
}

 

=> 안녕

안녕

안녕

 

3) map 사용

function App (){
  var Items = [바나나, 배, 사과];
  
  return (
    <div>
      { Items.map(function(val){
        return (<div>{val}</div>)
      }) }
    </div>
  )
}

 

=> 바나나

배

사과

 

4) 반복문으로 div 생성

function App (){
  function test() {
    var array = [];

    for(var i = 0; i < 3; i++) {
      array.push(<div>Hi~</div>);
    }

    return array;
  }
  
  return (
    <div>
      { test() }
    </div>
  )
}

 

5) map 의 반복문을 쓸 때 i 파라미터 추가하면 된다. (i = 0, 1, 2, 3 ...)

function App (){
  var Items = [바나나, 배, 사과];
  
  return (
    <div>
      { Items.map(function(val, i){
        return (<div>{i + val}</div>)
      }) }
    </div>
  )
}

 

6) 

Items.map(()=>{
  return(<div></div>)
})

 

6-1)

Items.map((a, i)=>{ //a는 Items의 하나하나 값, i는 0, 1, 2...
  return(<div ></div>)
})

 

7) 반복문에 key값 부여

Items.map((a, i)=>{ //a는 Items의 하나하나 값, i는 0, 1, 2...
  return(<div key={i}></div>)
})