야근시렁

실제 프로젝트를 하다보면, 다양한 케이스가 존재합니다. 

우리가 보통 생각하는 map 은 데이터가 이미 존재하고 해당 데이터를 map 으로 돌린다. 

특히 리액트 프로젝트에서 return 부분에서는 for문을 사용할 수 없다.

라고 인식하기 때문에, 특정 숫자를 지정해서 반복문을 돌려야 하는 경우 불가능 하다고 생각하는 분들도 있을 것 같습니다. 

방법은 여러가지가 있습니다만, 만약 배열을 돌리는 수가 적은 경우 그냥 [1,2,3] 로 돌려도 됩니다. 

<div>
    {[1,2,3].map((_, idx) => (
      <p key={idx}>item {idx}</p>
    ))}
</div>

하지만, 돌려야하는 그 수가 많은경우 저렇게 사용하면 비효율적이기 때문에, Array함수를 사용하여 배열을 만들어 사용하는것이 좋습니다. 단, Array(5) 이렇게 하면 5자리 배열이 생성되는건 맞지만 각각의 요소는 undefined 이므로, 대신 fill로 대충 값을 채워준뒤 사용하면 됩니다. 

<div>
    {Array(5).fill(null).map((_, idx) => (
      <p key={idx}>item {idx}</p>
    ))}
</div>

그러면 이를 이용해서 다음과 같은 배열도 만들수 있습니다. 

var menu=["햄버거", "치킨", "피자"]; 라는 데이터가 있는데,

무조건 5개의 UI가 나와야하고, 값이 없는경우는 "준비중"으로 표시한다고 가정해 봅시다.

그러면 우리는 위에서 배운 Array를 사용해서 구현할 수 있겠습니다. 

※ 아래 코드를 보기전에 문제처럼 먼저 구현해보면 좋을 것 같네요!😀

function App() {
  const menu = ["햄버거", "치킨", "피자"];
  return (
    <div>
      <ul>
        {
          menu.map((item) => (
            <li>{item}</li>
          ))
        }
        {
          Array(5 - menu.length).fill(0).map((item, idx) => (
            <li>준비중</li>
          ))
        }
      </ul>
    </div>
  )
}