자바스크립트 배열의 map() 함수

map함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 규칙에 따라 변환, 생성한다.

arr.map(callback, [thisArg])

map함수의 파라미터

• callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음과 같다.
  • currentValue : 현재 처리하고 있는 요소
  • index : 현재 처리하고 있는 요소의 index 값
  • array : 현재 처리하고 있는 원본 배열
• thisArg(선택항목) : callback 함수 내부에서 사용할 this 래퍼런스

map 예제

아래 두 코드는 같은 출력을 한다.

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

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(num => num * num);
console.log(result);

데이터 배열을 컴포넌트 배열로 변환하기

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

Key

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

key가 없을 때는 Virtual DOM을 비교하는 과정에서 순차적으로 비교하면서 변화를 감지한다.

key가 있으면 더욱 빠르게 변화를 알아챌 수 있다.