Array.from()

Array.from()은 문자열 등 유사 배열 객체나 이터러블한 객체를 배열로 만들어주는 메서드이다.
유사 배열 객체란, 키가 인덱스 값으로 되어있고 길이를 나타내는 length 속성을 갖는 객체를 의미한다.

우선 MDN에서의 예시를 살펴보면...

// ✅ 첫번째 인자로 이터러블한 객체, 두번째 인자로는 map function을 받는 것을 알 수 있다.
Array.from(arrayLike[, mapFn[, thisArg]])

// ✅ 파라미터 예시
Array.from([1, 2, 3], x => x + x); // [2, 4, 6]

아래의 예시를 보면 쉽게 Array.from()이 뭔지 쉽게 이해될 수 있다!

예시1

// ✅ 문자열을 배열로 만드는 예시
Array.from("HelloWorld") // [ 'H', 'e', 'l', 'l', 'o', 'W', 'o', 'r', 'l', 'd' ]

// ✅ 유사 배열 객체를 배열로 만드는 예시
const obj = { 0: "찬민", 1: "희진", 2: "태인", length: 3 };
Array.from(obj); // [ '찬민', '희진', '태인' ]

예시2

// ✅ Array.from()으로 1부터 50까지의 수를 원소로 갖는 배열을 생성하기
const arr = Array.from({length:31}).map(_,i) => i+1;
// 혹은
const arr2 = Array.from(Array(31)).map(_,i) => i+1;

예시3

const funcA = (...args) => {
	return Array.from(args)
}

console.log(funcA('가', '나', '다')) // [ '가', '나', '다' ]

• Array.from()의 첫번째 인자는 배열로 만들 이터러블한 객체이다.

예시4

// ✅ 버튼을 클릭한 횟수 만큼 컴포넌트 반복 렌더하기

// useState
const [count, setCount] = useState(0);

// 버튼 컴포넌트
 <Button onClick={() => setCount(p => p + 1)}>추가하기</Button>

// 추가 하기 버튼을 클릭한 만큼Form 컴포넌트 반복하기
{Array.from({length:count}).map((_,i) => (
  <div key={i}>
  	<Form/>	
  </div>
)}

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from/