map

Java script 내장함수 map 

파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 결과 반환

 

array.map(callback, [thisArg])

기본형은 함수를 넘겨서 작업하는 방법

var numbers = [1,2,3,4,5]

var processed = numbers.map(function(num){
					return num*num
                    });
console.log(processed)

화살표 함수를 이용할 수도 있다.

var numbers = [1,2,3,4,5]

var processed = numbers.map(num=>num*num)
console.log(processed)

 

결국 map을 어떻게 컴포넌트에 적용하느냐는 다음 예제를 보자

li를 만들어서 저장해두고 ul에 넣자.

import React from 'react'

const IterationSample = () => {
	const names = ["a", "b", "c", "d"]
    const nameList = names.map(name => <li>{name}</li>);
    return <ul>{nameList}</ul>

map을 사용할때는 항상 key를 넣어줘야한다. 런타임시에 오류가 나는 것은 아니지만, 로그에 오류가남는다. 

위의 예제에서는 map에서 반환하는 index를 키로 넣어주면 되겠다.

import React from 'react'

const IterationSample = () => {
	const names = ["a", "b", "c", "d"]
    const nameList = names.map( (name, index) => <li key={index}>{name}</li>);
    return <ul>{nameList}</ul>

 

index는 어디서 온걸까..

맨 처음에 map을 사용할때는 callback함수가 온다고 했다. 

이때 callback함수안에는 총 3가지 요소가 들어있다.

array.map(callback, [thisArg])
* callback : 새로운 배열 요소를 생성하는 함수로 파라미터는 3가지
1) currentValue : 현재 처리하고 있는 요소
2) index : 현재 처리하고 있는 요소의 index값
3) array : 현재 처리하고 있는 원본 배열

thisArgs: callback함수 내에서 사용할 this 레퍼런스