자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있다. 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성할 수 있다.
arr.map(callback, [thisArg])함수를 설명하자면
- callback : 새로운 배열의 요소를 생성하는 함수이며 해당 파라미터에 들어갈 것은 다음과 같다.
- currentValue: 현재 처리하고 있는 요소
- index: 현재 처리하고 있는 요소의 index값
- array: 현재 처리하고 있는 원본 배열
- thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스
var numbers = [1,2,3,4,5]; var processed = numbers.map(function(num{ return num * num;` })
Map을 이용하여 컴포넌트를 생성
‘import React from 'react'; const IterationSample = () => { const names = ['눈사람', '얼음', '눈', '바람']; const nameList = names.map(name => <li>{name}</li>); return <ul>{nameList}</ul>; }; export default IterationSample;
Key
렌더링을 할 때 어떤 원소에서 변동이 있었는지 파악 할 때 사용
예를들면 유동적인 데이터를 다루었을 때 key값이 없다면 virtual DOM 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지합니다. 하지만 key가 있을 경우 더욱 빠르게 알아 낼 수 있습니다.
‘key 값을 설정할 때는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 됩니다. key 값은 언제나 유일해야 합니다’
‘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를 이용해서 생성
하지만 배열이 변경될 때는 리렌더링이 어렵다.
Uploaded by Notion2Tistory v1.1.0