map() : 반복되는 컴포넌트를 랜더링하기 위하여 자바스크립트 배열의 내장 함수[React에서 for문 대체]
문법 : arr.map(callbackFunction(currenValue,index,array),thisArg)
콜백 함수 : 새로운 배열의 요소를 생성하는 함수.
인수 : currentValue : 현재 배열 내의 값 / index : 현재 배열 내의 인덱스 / array : 현재 배열
thisArg(선태항목) : 콜백 함수 내부에서 사용할 this 레퍼런스 설정
ex) let numbers=[1,3,5];
let listItems=numbers.map((number,index)=>{console.log(number) return number+1});
console.log(listItems);
을 실행하면 콘솔창에 1,3,5 와 (3)[2,4,6]이 나온다.
차근차근 살펴보면 numbers는 일단 1,3,5를 가진 배열이다. 다음 줄에는 새로운 배열인 listItem이 생겼고, 이 배열은 새로운 배열인 listItems의 number(배열 내의 값) 은 console.log(numbers의 0번째 인덱스 값) 와 numbers의 0번째 인덱스인 1에 +1한 2 를 return해서 받아온다. 이때 console.log는 콘솔창에 바로 출력 되고 return으로 받아진 listItems의 배열은 [2,undefined,undefined] 가 된다. 물론 중간의 listItems 배열 값은 확인하지 못한다. 이를 numbers의 모든 인덱스를 반복한다(이 점이 배열을 넣은 for문 과 비슷 ) 끝나고 나서는 콘솔에는 기존 numbers의 인덱스 0부터 2까지 의 값이 보여지고, 최종적으로 console.log(listItems); 로 listItems 배열인 [2,4,6]이 나온다.
key : 요소의 리스트를 만들 때, React가 어떤 아이템이 바뀌었는지, 혹은 추가되었는지, 혹은 삭제되어는지를 인식하는데 사용. 요소의 고유한 값이여야 하므로 배열 요소의 id나 index를 사용. index의 경우 배열의 순서가 바뀌면 index도 바뀐다는 점을 주의해야 한다.
props(properties) : 컴포넌트끼리 값을 전달하는 수단. 읽기전용