[GDSC] 5주차 수업 자료

Map 함수

여러 개의 컴폰너트를 하나씩 직접 작성하는 것은 비효율적이다.
이런 경우를 해결하기 위에서 쓰이는 함수이다

즉, map함수는 배열의 각 요소에 대해 특정 작업을 수행하고 그 결과로 새로운 배열을 생성한다.'
기존 배열을 변경하지 않고, 매핑된 새로운 배열을 반환한다

map(mapping)
한쪽에 있는 아이템과 다른 한쪽에 있는 아이템을 짝지어 준다는 뜻으로
React에서 배열에 들어있는 각 변수에 어떤 처리를 한 뒤 리턴하는 것으로 이해하면 된다

예제

import React from 'react';

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];

  return (
    <div>
      <h1>Fruit List</h1>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

렌더링 결과

Fruit List
- Apple
- Banana
- Orange
- Mango

사용 예시

위와 같은 코드를 아래 처럼 map 함수를 만들어 간단하게 만들 수 있다.