[React] map() 함수

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

반복되는 컴포넌트를 렌더링하기 위하여 자바스크립트의 배열의 내장 함수인 map() 사용
map 함수는 파라미터로 전달된 함수를 사용해, 배열 각 요소를 원하는 규칙에 따라 변환한 다음 새로운 배열을 생성한다.

arr.map(callbackFunction(currentValue, index, array), thisArg);

즉, callbackFunction을 실행한 결과를 이용해 새로운 배열을 만들어 내는 함수

callback function을 작성할 때 첫 번째 인자는 현재 배열(arr) 내의 값들을 의미하며, 두 번째 인자는 현재 배열 내 값의 인덱스를 의미, 세 번째 인자는 현재 배열을 의미

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

map 함수를 사용해, 정의한 callback function을 보면 원래 배열값에 제곱한 형태의 값으로 새로운 배열을 만들었다.

ES6 문법 사용시

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

var 대신 const 키워드를, function(...){...} 대신 화살표 함수 문법 사용

📖 key 란?

리액트에서 li 태그 반복에서의 map 함수 활용

import React from "react";

const iterationSample = () => {
	const names = ["눈사람", "얼음", "눈", "바람"];
    const nameList = names.map((name) => <li>{name}</li>);
    
    return <ul>{nameList}</ul>;
}
// 리스트 형태로 눈사람, 얼음, 눈, 바람

key를 설정하지 않을 경우 Key prop 경고 메시지 오류가 발생한다.

Warning: Each child in a list should have a unique "key" prop.

map 함수 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하는 것과 같이 작성하며, key 값은 언제나 유일한 값이어야 한다.

const articleList = articles.map((article) => {
	<Article title={article.title} writer={article.writer} key={article.id} />
});