반복되는 요소 처리 방법 (map, for)

1. 자바스크립트 map 함수 

기능 1. array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줍니다.

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

=> console.log(1) 3번 실행됨 

 

 

기능 2. 콜백함수에 파라미터 아무렇게나 작명하면 그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해줍니다.

(그냥 소괄호안에 있는 함수를 콜백함수라고 합니다)

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

=> 2, 3, 4가 콘솔창에 출력됨 

 

 

기능3. return 오른쪽에 뭐 적으면 array로 담아줍니다. 

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

=> newArray는 [20, 30, 40] 이 출력됨 

 

 

2. JSX 안에서 html을 반복생성하려면

리액트 중괄호안에서 html을 반복생성하고 싶으면 아까 배운 map을 이용해도 됩니다. 

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

▲ 이렇게 쓰면 <div>안녕</div> 이 3개 생성됨

 

ex. 반복되는 글제목 3개도 반복문으로 축약

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

▲ 이렇게 하면 글제목이 3개 생성됩니다. (글제목이라는 state도 array자료라서 map 붙일 수 있습니다)

 

반복된 HTML에 각각 다른 제목을 부여하고 싶다면(1)

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

▲ 이렇게 하면 각각 다른 글제목이 3개 생성됨

 

반복된 HTML에 각각 다른 제목을 부여하고 싶다면(2)

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

 

 

(참고) 일반 for 반복문을 쓰고싶다면

1. html들을 담아둘 array 자료를 하나 만들어줍니다.

2. 일반 for 반복문을 이용해서 반복문을 돌림 

3. 반복될 때 마다 array자료에 <div> 하나씩 추가해줍니다. 

4. 원하는 곳에서 {array자료} 사용하면 됩니다. 

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

▲ 이렇게 해도 <div>안녕</div> 이게 3개 출력됨.

for 문법은 JSX 안에서 사용할 수 없어서 저렇게 바깥에서 쓰면 됩니다.  귀찮으면 map을 씁시다.