reactjs에서 반복문으로 HTML태그 만들기

1. 개요

• map 함수를 알아야 함
  • 어레이 자료형 뒤에 map()을 붙이면 map()의 콜백함수안에 있는 코드를 어레이 원소 수 만큼 반복해줌
  • 콜백함수에 파라미터 붙이면 어레이 안에 들어있던 값을 순서대로 꺼내줄 수도 있음
  • 마지막으로 콜백함수의 return에다가 뭐 담으면 어레이로 담아줌

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

2. 코드

• 예를 하나 들어봅시다

import {useState} from 'react';

function App() {
  let [글제목, 제목바꾸기] = useState(['1번제목', '2번제목']);
    
  return (
    <div>
      {
        글제목.map(function(a, b){
          return(
            <div key={a}>
              <h3>글번호 : {b+1}</h3>
              <h3>{a}</h3>
            </div>
          )
        }
      }
    </div>
  )
}

• state에 글제목을 여러개 저장하고, map()을 이용해 글 제목만큼 <div>태그를 반복해줌
• 이때, map()의 콜백함수에 매개변수 a와 b가 들어가는데 a는 글제목 state에 들어있는 제목을 순서대로 갖게 됨
• b는 0부터 시작되는 숫자인데 반복횟수만큼 증가함
• 그래서 위 코드를 실행하면 글번호와 글제목이 표시되는 <div>태그가 글제목 state에 들어있는 제목 수 만큼 반복됨