React - Array.map()

❶ Array.map()이란?

Array.map()은 항목 목록을 렌더링하기 위해 React 구성 요소에서 일반적으로 사용되는 내장 JavaScript 배열 메서드입니다.
이 메서드는 원래 배열 자체를 수정하지 않고 원래 배열의 모든 요소에 지정된 함수를 적용하여 새 배열을 만듭니다.
Array.map()은 데이터 배열을 구성 요소에 표시할 수 있는 JSX 요소 배열로 변환하는 데 사용됩니다.

❷ Array.map()을 사용하는 이유

React 구성 요소에서 Array.map()을 사용하면 더 깨끗하고 읽기 쉬운 코드를 달성하고 동적 목록을 효율적으로 관리하며 렌더링 성능을 최적화하는 데 도움이 됩니다.
입력 데이터를 기반으로 목록을 렌더링하는 유연하고 선언적인 접근 방식을 허용하므로 코드를 유지 관리하고 이해하기가 더 쉽습니다.

❸ 사용 방법

React 구성 요소에서 Array.map()을 사용하는 방법에 대한 기본 예시 입니다.

import React from 'react';

function NumberList({ numbers }) {
  const listItems = numbers.map((number, index) => (
    <li key={index}>{number}</li>
  ));

  return <ul>{listItems}</ul>;
}

// Usage
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(<NumberList numbers={numbers} />, document.getElementById('root'));

예시에서 NumberList 구성 요소는 NumberList를 component로 받습니다.
Array.map() 메서드는 numbers 배열을 반복하고 <li> 요소의 새 배열을 만드는 데 사용되며 각 요소는 원래 배열의 숫자를 표시합니다.
React가 요소 목록을 효율적으로 관리할 수 있도록 key 속성은 배열의 index로 설정됩니다.