React : map 사용해서 div 반복생성하기

map의 기능

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

• map은 array의 자료개수만큼 코드를 반복실행한다.
• 파라미터를 각 자료로 가진다.
• return 우측의 코드를 array에 담고 map 쓴 자리에 남겨준다.

---

map 사용해서 div 반복생성하기

array자료인 state도 array.map으로 활용할 수 있다. (array 개수만큼 반복생성된다)

function App (){
  let [title, sortTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']);
  return (
    <div>
      (생략)
      { 
        title.map(function(){
          return (
          <div className="list">
            <h4>{ title[0] }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
    </div>
  )
}

---

각 제목을 array 안의 각 자료로 담고 싶다면 아래처럼 짠다.

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

여기서 i는 한번 돌 때마다 1씩 증가하는 정수이다.

---

출처 : 코딩애플 https://codingapple.com/