: array 안에 들어있는 자료 갯수만큼 코드를 반복실행해주는 함수
: 쓸떄는 array자료 우측에 .map()함수를 붙여 사용

map 문법

문법1. array 자료개수만큼 함수 안의 코드를 반복실행 함

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

1 1 1

문법 2. 콜백함수에 파라미터를 넣어주면 array안에 자료를 하나씩 출력해 줌

[1,2,3].map(function(a){
  console.log(a)
});

1 2 3

문법 3. array로 담기

let newArray = [1.2,3].map(function(a){
  return a * 10
});
console.log(newArray)

[20, 30, 40]

map 파라미터

기능2를 보면 콜백함수에 파라미터를 넣어주면 array안에 있던 자료들을 하나씩 출력해 준다고 했는데,
map에는 파라미터를 2개까지 넣을 수 있음

• 첫째 파라미터 a는 array안에 있던 자료
• 둘째 파라미터 i는 0부터 1씩 증가하는 정수

function App (){
  return (
    <div>
      (생략)
      { 
        글제목.map(function(a, i){
          return (
          <div className="list">
            <h4>{ 글제목[i] }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
    </div>
  )
}

그래서 이런식으로 써줄 수 있음

✔️ 참고) map 반복문으로 반복생성한 html엔 key={i} 속성을 추가해야 함.

<div className="list" key={i}>
그래야 리액트가 <div>들을 각각 구분할 수 있어서 그럼

# summary

let Arr = [{name:"aa", id:1},{name:"aa", id:2},{name:"aa", id:3},{name:"aa", id:4}]

const newArr = Arr.map((element)=>(element.id))
//newArr 은 [1, 2, 3, 4] 이런 모습의 배열이 된다.

배열에 담긴 값들을 하나하나 꺼내 어떤 작업 후 새로운 배열로 반환

map이 객체를 돌며 id값만 빼내서 새로운 배열을 만들어내고,
기존 배열은 건드리지 않는다