map 반복문

자바스크립트 map 함수

• array 자료 오른쪽에 map() 함수를 붙일 수 있다.
• array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행

var 어레이 = [2,3,4];
어레이.map(function(){
  console.log(1)
});//1이 3번 실행

• 콜백함수(소괄호 안에 있는 함수)에 파라미터에 아무렇게나 작명하면 그 파라미터는 array 안에 있던 모든 자료를 하나씩 출력

var 어레이 = [2,3,4];
어레이.map(function(a){
  console.log(a)
})//2,3,4 출력

• return 오른쪽에 뭘 적으면 array로 담아준다

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

• react 중괄호 안에서도 html을 반복생성하고 싶을 때도 map 사용 가능
• [1,2,3]에다가 map을 붙였으니 그 안의 자료 갯수만큼 map 내부 코드를 실행
• return에 <div>안녕</div>가 있으니 이것을 array에 담아줌

function App (){
  return (
    <div>
      { 
        [1,2,3].map(function(){
          return ( <div>안녕</div> )
        }) 
      }
    </div>
  )
}//<div>안녕</div>
<div>안녕</div>
<div>안녕</div>
출력

지금까지 했던 글제목 3개를 map을 써서 한번에 반복하기

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

• 하지만 이렇게 작성하면 하나의 글제목만 보인다.
• 따라서 반복문이 돌 때마다 <h4>{글제목[0]}<h4>, <h4>{글제목[1]}<h4>, <h4>{글제목[2]}<h4> 이런 데이터들이 만들어지게 코드를 작성해야됨.
• a라는 파라미터를 사용하여 map이 반복될 때마다 array 자료 안에 있던 하나하나의 데이터들을 사용

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

• 이렇게 사용하여 map 함수 안에 파라미터를 2개 넣고 i를 0부터 1씩 증가하는 정수로 활용하여 사용해도된다.

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