[JS] Array.from과 map

Array.from과 map을 사용하는 이유

• 동적 요소 생성:
  • Array.from: 이 메소드는 유사 배열 또는 반복 가능 객체에서 새 배열 인스턴스를 생성합니다. { length: 10 }를 지정하면 정의되지 않은 10개의 요소가 있는 배열이 생성됩니다.
    특정 길이의 배열을 생성하는 간결한 방법입니다.
• 요소 생성을 위한 반복:
  • map: 이 함수는 배열의 각 요소를 반복하고 변환을 적용합니다(이 경우 각 요소에 대해 'div' 생성).
  • 'map'을 사용하는 것은 배열을 기반으로 동적으로 요소 목록을 생성하는 일반적인 React 패턴입니다. 각 요소가 처리되어 React 구성 요소로 변환된 다음 DOM으로 렌더링됩니다.

1️⃣ Array.from 사용법

Array.from({ length: 10 });
// Output: [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

• 첫 번째 인수
  • 유사 배열 또는 반복 가능한 객체입니다.
  • 여기서 { length: 10 }는 10개의 정의되지 않은 요소가 있는 배열을 생성합니다.
• 두 번째 인수(선택)
  • 배열의 각 요소에 적용할 수 있는 맵 함수입니다.
  • 이 경우에는 사용되지 않습니다.

2️⃣ map 사용법

• map은 콜백 함수를 받아 배열의 각 요소에 적용합니다.
• 콜백 함수는 두 개의 인수를 받습니다:
  1. 현재 요소(이 경우 undefined).
  2. 현재 요소의 인덱스.
     콜백 함수는 새로운 요소를 반환합니다(여기서는 div).

     .map((_, index) => (
     <div key={index} className="..."></div>
     ));