[React] 배열을 출력하기 위해 Map 메소드 사용하기

| Map 메소드

Map 메소드는 파라미터로 전달 된 함수를 통해 배열의 각 요소를 프로세싱하여 그 결과로 새로운 배열을 생성한다.

let arr = [3,4,5,6,7,8,9,123];
let arr_map = arr.map(function(value){
    return value*2
})

console.log(arr_map)
// 결과값 : [ 6, 8, 10, 12, 14, 16, 18, 246 ]

 

| map을 사용해서 사진을 배열로 출력하기

import React from "react"

class MyPic extends React.Component {
    state = {
        pics:[
            './images/sw01.png',
            './images/sw02.png',
            './images/sw03.png',
            './images/sw04.png']
      }

    render(){
        let img = this.state.pics.map((item, i) =>{
            return <img key={i} src={item}/>
        });
        let str = []; // arr를 담아줄 배열 추가
        
        //map 이용하기
        for(let i=0; i<img.length; i++){
            str.push(<img src={img[i]} key={i}/>);
        }

        return(
            <span>
                {img}
                {str}
            </span>
        );
    }
}

export default MyPic;

 

| img 태그는 push 를 할 수 없다

 

| 출력결과

map으로 구현한 img 는 사진이 잘 나오지만, str은 잘 나오지 않는것을 확인 할 수 있다.