[React] map()

map()

자바스크립트 배열의 내장 함수(메소드)이다.

배열의 요소를 돌면서 인자로 전달된 함수를 사용해 처리된 새로운 결과를 새로운 배열에 담아 반환한다.

let arr = [3, 4, 5, 6];

let modArr = arr.map(function(element){
    return element *3;
});

console.log(modArr); // [9, 12, 15, 18]

 

 

arr.map(function(element, index, array){  }, this);

요소(element)뿐만 아니라 인덱스(index), 전체 배열 객체(array)를 전달하고, this는 콜백함수 내부에서 사용하게 된다.

 

 

리액트 map() 예시

const ItemList = () => {

    const data = ['First', 'Second', 'Third', 'Forth', 'Fifth'];

    const Item = data.map((item) => {
        return <li>{item}</li>
    })


    return (
        <ul className="box">
            {Item}
        </ul>
    );
}

export default ItemList;