map()함수 사용하기

map()함수 사용하기

배열함수 map()은 forEach()와 마찬가지로 for문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않는다. 차이점은 map()은 forEach()와 달리 return을 사용해 반환 값을 받을 수 있다는 것이다.

예제코드

App.js

import React from 'react';
import './App.css';
import Map from './R015_Map';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <Map/>
    </div>
  );
}

export default App;

R015_Map.js

import React, { Component } from "react";

class R015_Map extends Component {

  componentDidMount() {
    var Map_Arr = [3,2,8,8];
    let Map_newArr = Map_Arr.map(x=>x);
    console.log("1. Map_newArr : ["+Map_newArr+"]");

    let Map_mulitiArr = Map_Arr.map(x => x * 2);
    console.log("2. Map_mulitiArr : ["+Map_mulitiArr+"]");

    var ObjArray = [{key: 'react', value:'200'},
                    {key:'리액트', value:'TwoHundred'}];
    let Map_objArr = ObjArray.map((obj, index) => {
      console.log((index+3)+". obj : "+JSON.stringify(obj));
      var Obj = {};
      Obj[obj.key] = obj.value;
      return Obj;
    });
    console.log("5. Map_objArr : "+JSON.stringify(Map_objArr));
  }

  render(){
    return (
      <h2>[THIS IS Map]</h2>
    )
  }
}

export default R015_Map;

코드해설

기존배열(Map_Arr)에서 map() 함수를 사용해 순서대로 하나씩 요소에 접근해 가져온다. 이때마다 콜백 함수가 실행된다. 가져온 값을 변수 x에 넣은 후 그대로 반환해(x⇒x)순서대로 쌓아 놓는다. 마지막 요소까지 반복했다면, 한 번에 새로운 배열(Map_newArr)에 저장한다.

화살표 함수는 return 구문을 생략할 수 있다. line 7에서 사용한 Map_Arr.map(x ⇒ x)는 Map_Arr.map(x ⇒ {return x})와 동일하게 동작한다.

Line10

• 기존 배열(Map_Arr)의 요소에 순서대로 접근 후 각각 2를 곱해 새로운 배열(Map_mulitiArr)에 저장한다.

Line 13~14

• 배열 안에 객체를 생성한다.

Line 15

• 배열 안의 객체를 순서대로 가져와 콜백 함수를 실행하는데, 가져온 값을 obj라는 변수에 저장한다. 콜백 함수의 두 번째 인자인 index는 기존 배열의 인덱스와 동일하다.

Line 16

• 기존 배열에서 가져온 객체 값을 순서대로 출력한다.

Line 17~19

• 새로운 객체(Obj)를 선언한다. 기존 객체(ObjArray)의 key, value 값을 새로운 객체(Obj)의 key, value 값으로 저장한다. 모든 반복이 끝나면 line 15의 Map_objArr 변수에 반환 값들을 저장한다.

실행결과