[React] DIV 반복 생성

# 지정한 횟수만큼 반복하고 index 수로 link 이동

• 10번 반복하고 div의 키값은 각 인덱스 (0번째면 0으로...)
• 링크 클릭했을 때 인덱스 값 이용해 이동 -> ex) 0번째면 /posts/0으로 이동

<div className="post__list">
    {[...Array(10)].map((e, index) =>(
        <div key={index} className="post__box">
            <Link to={`/posts/${index}`}>게시글 {index}</Link>
        </div>
    ))}
</div>

---

# 정의한 배열로 div 반복 생성

• 첫 번째 예시 응용
• 배열 생성 후 그 배열만큼 반복 생성

import './App.css';
import { useState } from 'react';

function App() {

  let [title, setTitle] = useState(['남자 코트 추천1', '강남 우동 맛집2', '파이썬 독학3']);
  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>

      {
        title.map(title => (
          <div className="list">
            <h4>{title}</h4>
            <p>3월 18일 발행</p>
          </div>
        ))
      }
    </div>
  );
}

export default App;

---

두 예시를 응용하면 서버에서 데이터 조회 후 그 데이터만큼 반복 생성 가능