리액트 map 함수 사용법

반복문을 쓰고 싶을땐 for문이 아닌 map함수

• 언제쓰나요?

  똑같은 html이 반복적으로 나올 때 사용하는 함수이다.
  안타깝게도 JSX 중괄호 안에서는 for문을 사용할 수 없기에 map함수를 사용한다.

예를들어

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

일 때 Array 배열안의 값이 3개이기에, 실행해보면 콘솔창에 1이 3번 적혀있는것을 알 수 있다.

콜백함수에 파라미터를 적을 경우에는 그 어레이 안에 있는 파라미터를 하나씩 출력해 준다.

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

라고 한다면 콘솔창에는 2,3,4가 한번씩 출력된다.
[2,3,4]가 한줄에 나오는 것이 아닌 2,3,4가 한줄에 하나씩 나오는 것임에 유의

• 예를 들어 이런 html이 안에 있다면?

function App (){
  return (
    <div>
      { 
        Array.map(function(){
          return (
          <div className="list">
            <h4>{ Array[0] }</h4>
          </div> )
        }) 
      }
    </div>
  )
}

아쉽게도 Array[0]이라고 못을 박아뒀기 때문에 map함수가 돌때 계속 Array[0]만 뱉어내게 된다.

• 그럼 어떻게 해야할까요?

  콜백함수내에 파라미터를 넣으면 된다.

function App (){
  return (
    <div>
      { 
        Array.map(function(a){
          return (
          <div className="list">
            <h4>{ a }</h4>
          </div> )
        }) 
      }
    </div>
  )
}

이렇게 하면 map함수가 돌때마다 <h4>에 Array 배열안에 있는 데이터들이 들어가게 된다는 소리이다.

Tip. map 반복문으로 반복생성한 html엔 key={i} 같은 것을 넣어주어야한다.
            없다면 warning메세지가 뜬다.

저는 그래도 for반복문을 쓰고 싶어요

방법이 없는 것은 아니다. 방법은 바로

1. html들을 담아둘 array자료를 하나 만든다.
2. 일반 for 반복문을 이용해서 반복문을 돌린다.
3. 반복될 때 마다 array 자료에 <div>하나씩 추가해준다.
4. 원하는 곳에서 {array자료} 사용한다.

예를 들어서

function App (){
  
  var Array = [];
  for (var i = 0; i < 3; i++) {
    Array.push(<div>안녕</div>)
  }
  return (
    <div>
      { Array }
    </div>
  )
}

이렇게 되면 똑같이 나온다.
물론 JSX에서는 map을 자주 사용하니 그냥 map함수를 사용하도록 하자..!