JavaScript Array Reference

자바스크립트 배열 map()

map(): 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 처리한 후 새로운 배열을 생성하는 내장 함수

문법

• arr.map(callback, [thisArg])
• callback: 새로운 배열의 요소를 생성하는 함수, 다음 세가지 파라미터를 갖음
• thisArg(optional): callback 함수 내부에서 사용할 this 레퍼런스

기본 예제

var numbers = [1, 2, 3, 4, 5];
var processed = numbers.map(function(name) {
		return num * num;
});

console.log(processed);
//[1, 4, 9, 16, 25]

ES6 문법으로 다음과 같이 가능

const number = [1, 2, 3, 4, 5];
const processed= numbers.map(num => num * num);

console.log(processed);
//[1, 4, 9, 16, 25]

데이터 배열 → 컴포넌트 배열로 map 수행

//IterationSample.js
import React, { Component } from 'react';

class IterationSample extends Component {
    render() {
        const names = ['눈사람', '얼음', '눈', '바람'];
        const nameList = names.map(name => (<li>{name}</li>))
        return (
            <ul> {nameList}</ul >
        );
    };
}

export default IterationSample;

key

리액트에서 key는 컴포넌트 배열을 렌더링할 때 어떤 원소에 변화가 있었는지 알아내려고 할 때 사용한다.

key가 없으면 가상 DOM을 비교하는 과정에서 배열을 순차적으로 비교하여 변경 감지

key가 있으면 더욱 빠르게 변경 감지 가능

//IterationSample.js
import React, { Component } from 'react';

class IterationSample extends Component {
    render() {
        const names = ['눈사람', '얼음', '눈', '바람'];
        const nameList = names.map((name, index) => (<li key={index}>{name}</li>))
        return (
            <ul> {nameList}</ul>
        );
    };
}

export default IterationSample;

응용하기