5-2. map() 사용해보기

map함수 사용해보기

iterationSample.js에 배열을 추가하여 map을 사용해봅시다.

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

const IterationSample = () => {
// 배열 생성
    var numbers = [1, 2, 3, 4, 5];

// map()함수로 새로운 배열 생성
    var processed = numbers.map(function(num){
        return num*num;
    });

// 콘솔에 출력합니다.
    console.log(processed);

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

export default IterationSample;

결과

이처럼 map() 함수는 기존 배열로 새로운 배열을 만드는 역할을 합니다.

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;

수정 후 IterationSample.js 컴포넌트

import React from 'react';

const IterationSample = () => {

// li에 들어가 있던 내용을 배열로 생성    
    const names = ['눈사람', '얼음', '눈', '바람'];

// map함수 사용
    const nameList = names.map(item => <li>{item}</li>);

    return (
        <ul>
            {nameList}
        </ul>
    );
};

export default IterationSample;

결과

수정 전과 수정 후는 똑같은 결과를 출력하고 있습니다.

const nameList = names.map(item => <li>{item}</li>);

이 코드를 설명하자면

map 함수 안에 item은 names라는 배열안의 속성 하나하나입니다.

즉, 배열의 개수만큼 그 안의 속성을 하나씩 출력합니다.

// 예를 들어
const names = [1,2,3,4,5]; 일 경우
const nameList = names.map(item => <li>{item}</li>);
// 이 map 함수는
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
// 를 반환합니다.