Map함수란?
Map 함수란? 자바스크립트 배열 객체의 내장함수로써 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성하며, 반복되는 컴포넌트를 렌더링 할수 있게끔 해주는 함수입니다.
Map 함수의 형태
arr.map(callback, [thisArg])Map 함수의 파라미터
- callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지입니다.
- currentValue : 현재 처리하고 있는 요소
- index : 현재 처리하고 있는 요소의 index값
- array : 현재 처리하고 있는 원본 배열
- thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스
예제1
var numbers = [1, 2, 3, 4, 5];
var processed = numbers.map(function(num){
return num * num;
});
console.log(processed);예제1 (ES6문법)
const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(num => num * num);
console.log(result);
IterationSample.js
import React from 'react';
const IterationSample = () => {
const names = ['눈사람', '얼음', '눈', '바람'];
const nameList = names.map(name => <li>{name}</li>);
return <ul>{nameList}</ul>;
};
export default IterationSample;문자열로 구성된 배열을 선언하며, 그 배열 값을 사용하여 <list>···</list> JSX코드로 된 배열을 새로 생성한 후 nameList에 담습니다.
map 함수에서 JSX를 작성할 때는 DOM요소를 작성해도 되고, 컴포넌트를 사용해도 됩니다.
Key
리액트(React)에서는 컴포넌트를 렌더링 하였을 때 어떤 원소가 변경되었는지 빠르게 감지하기 위해 사용됩니다. 만약 key가 설정되지 않았다면 가상 DOM을 순차적으로 비교하면서 감지하기 때문에 key가 없을때보다 속도가 느립니다. 이러한 key 값은 map() 함수를 호출할 때 인자로 넘기는 Callback 함수의 인자로 넘어오는 index 값을 사용하면 됩니다.
Key설정
key 값을 설정할 때는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 됩니다. key 값은 언제나 유일해야 합니다. 따라서 데이터가 가진 고유 값을 key값으로 설정해야 합니다.
IterationSample.js
import React from 'react';
const IterationSample = () => {
const names = ['눈사람', '얼음', '눈', '바람'];
const namesList = names.map((name, index) => <li key={index}>{name}</li>);
return <ul>{namesList}</ul>;
};
export default IterationSample;고유한 값이 없을 때만 index 값을 key로 사용해야 합니다.
index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링하지 못합니다.
데이터 추가 기능
리액트에서 상태를 업데이트할 때는 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 합니다. 이를 불변성 유지라고 하는데요. 불변성 유지를 해 주어야 나중에 리액트 컴포넌트의 성능을 최적화할 수 있기 때문에 push함수를 사용하지 않는걸 권장합니다.
1. Spread 연산자
ES6에 새로 추가된 문법으로 ...을 사용해서 배열의 값들을 받아오거나 확장시킬 수 있습니다.
배열이나 문자열과 같이 반복가능한 문자를 0개이상의 인수(함수로 호출할 경우) 또는
요소(배열 리터럴의 경우)로 확장하여 0개 이상의 키 값의 쌍으로 객체로 확장시킬 수 있습니다.const arr = ['a', 'b', 'c'];
const arr2 = [1, 2, 3];
console.log([...arr, ...arr2]); // ['a', 'b', 'c', 1, 2, 3]2. Concat 함수
Concat 함수는 기존의 배열을 수정하지 않고, 새로운 원소가 추가된 새로운 배열을 만들어줍니다.const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = array1.concat(array2);
console.log(array3); //[1, 2, 3, 4, 5, 6]데이터 제거 기능
1. Filter 함수
불변성을 유지하면서 배열의 특정 항목을 지울 때는 배열의 내장 함수 filter를 사용합니다.
filter 함수를 사용하면 배열에서 특정 조건을 만족하는 원소들만 쉽게 분류할 수 있습니다.const nubers = [1, 2, 3, 4, 5, 6];
const biggerThanThree = numbers.filter(number => number > 3);
console.log(biggerThanThree); // [4, 5, 6]