JavaScript Array Reference

자바스크립트 배열 map()

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

문법

기본 예제

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;

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4d00ad18-7975-4b3b-b72c-dc7ed091be1f/Untitled.png

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;

응용하기