react 구조분해+map+rest parameter Array를 통해 n 개 만큼 element생성하기

TOC

1. map의 허점
2. 구조분해와 rest parameter

react hooks를 통해 달력을 만들던 중

1일부터 30일까지의 숫자를 html element로 찍어내기 위해 map을 사용하려던 순간 나는 1~30이 담겨있는 배열이 전혀 없다는 것을 깨달았다.

react에서 for 문을 사용하는 것은 상당히 코드가 난잡해지기 때문에 사용하지 않는다고 배웠다.

이 사태를 해결하기 위해선

rest parameter와 구조분해를 알면 조금 더 쉽게 해결이 가능해진다.

rest parameter는 MDN : rest parameter

구조 분해 할당=Destructuring assignment

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: Array [30,40,50]

이를 조합하면

배열이 없는 상태에서 map을 위한 배열을 만들어 낼 수 있다.

[...Array(yourInteger)].map

이런식으로 만들게 되면 -> yourInteger짜리의 배열을 하나 생성하고 그 배열을 다시 해체해서 각 배열에 넣어준다
yourInteger=2인 경우

[[undefined, undefined]]->[undefined, undefined]

의 형태가 된다.

[undefined,undefined,...]

배열이 yourInteger개 짜리 배열이 생성된다.