5-1. map() 배열 변환

map함수란?

자바스크립트의 배열 메서드 중 하나인 map 함수는 배열의 각 요소를 순회하면서 주어진 콜백 함수를 실행하고, 그 결과를 새로운 배열에 담아 반환합니다.
이를 통해 기존 배열의 값을 변환하거나 가공할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

그리고 리액트에서는 map함수를 이용하여 컴포넌트 배열을 생성할 수 있습니다.

iterationSample.js파일 생성하기

// iterationSample.js
import React from 'react';

const IterationSample = () => {
    return (
        <div>
            <ul>
                <li>눈사람</li>
                <li>얼음</li>
                <li>눈</li>
                <li>바람</li>
            </ul>
        </div>
    );
};

export default IterationSample;

이처럼 코드에서

<li>…</li>

형태가 반복되는 것을 볼 수 있습니다.
이처럼 반복되는 코드가 있을때, 하나하나 다시 작성하는 것은 불편한 일입니다.

이럴경우 map함수를 사용해서 코드를 반복 사용할 수 있습니다.