Map

구현하는 기능과 배우는 컨셉

✔ map함수를 이용해 반복된 HTML코드 간단히 만들기
✔ 일반 for 반복문을 쓰고싶다면?

Map 함수

◾ map함수는 원본 자료형을 변형시키지 않아서 새로운 변수에 담아서 사용한다

let arr = [1,2,3];
let newArray = arr.map(function(a){ return a * 10 });

◾ 위처럼 작성하면 newArray에는 [10, 20, 30]이 담겨져 있다.

JSX에서 map으로 반복문을 사용하고싶으면

function App (){
  return (
    <div>
      HTML  
      ...
      { arr.map(function(){
        return (<div>안녕하세요</div>)
      }) }
    </div>
  )
}

◾ arr라는 state 갯수에 맞게 3개만 생성한다고 가정해본다.
◾ 이렇게 하면, <div>안녕하세요</div> arr이라는 array엔 3개 데이터가 들어있다.
◾ 실행하면 div도 3개가 남는다.

실습적용해보기

◾ 반복문 쓸땐, 원하는 자료에 map을 붙이면 그 자료 갯수만큼 반복문을 돌릴 수 있다
◾ 반복문을 원하는 HTML을 return안에 적는다
◾ 기존 코드보다 훨씬 적은 코드로 글목록 HTML을 생성할 수있다.

반복된 HTML에 각각 다른 제목을 사용하고싶다면

◾ <h3>{글제목[1]}</h3> 이라는 제목만 계속 3번 반복되는게 아니라 반복문이 실행될때마다,
{글제목[0]}
{글제목[1]}
{글제목[2]}
◾ 이런 데이터가 들어가게 만들고 싶다면 map 함수에서 콜백함수 안에 파라미터를 num을 추가하면 그게 바로 array안의 데이터를 뜻한다.
◾ 그걸 <h3> {num} </h3> 에 넣으면 차례대로 각각 다른 제목이 출력된다.
◾ 반복된 HTML안에 onClick같은 event함수를 넣어도 잘 작동한다.

일반 for 반복문을 쓰고싶다면

function App (){

  function 반복된UI(){
    let arry = [];
    for (let i = 0; i < 3; i++) {
      arry.push(<div>안녕하세요</div>)
    }
    return arry
  }
  return (
    <div>
      HTML .....
      
      { 반복된UI() }
    </div>
  )
}

◾ 위의 예제코드는 for반복문을 이용해서 div를 3개 만들어보는 예제이다.
◾ for in/ for of도 마찬가지라 map을 사용하는게 훨씬 이득이다.