map
함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후
그 결과로 새로운 배열을 생성 한다.
arr.map(callback, [thisArg])
callback
새로운 배열의 요소를 생성하는 함수currentValue
현재 처리하고 있는 요소index
현재 처리하고 있는 요소의 index 값array
현재 처리하고 있는 원본 배열thisArg(선택 항목)
callback 함수 내부에서 사용할 this 레퍼런스map 함수를 사용하여 배열 [1, 2, 3, 4, 5]의 각 요소를 제곱해서 새로운 배열을 생성텍스트
const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(num => num * num);
console.log(result);
map함수는 기존 배열로 컴포넌트로 구성된 배열을 생성할 수 있다.
import React from 'react';
const test = () => {
const names = ['봄', '여름', '가을', '겨울'];
const nameList = names.**map(name => <li>{name}</li>);**
return <ul>{nameList}</ul>;
};
export default test;
Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.
key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
const articleList = articles.map(article => (
<Article
title={article.title}
writer={article.writer}
**key={article.id}**
/>
);
만약 위의 예제처럼 데이터가 갖는 고유 번호(유저아이디 등..)가 없을 때에는 map 함수에 전달되는 콜백 함수의 인수인 index 값을 사용하면 된다.
단 고유한 값이 없을 때만 index 값을 key로 사용해야 하며 index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링하지 못한다.