REACT_ Map() 함수 사용하기

<map() 함수 사용하기>

 

-배열 함수 map() : forEach()와 마찬가지로 for문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않음

차이점은 forEach()와 달리 return을 사용해 변환 값을 받을 수 있다는 것이다

 

- 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;

 

-  App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import Map from './R015_Map.js';

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

export default App;

 

결과