✅ map()

• map함수는 반복되는 컴포넌트를 렌더링 할 수 있는 함수이다.
• 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 새로운 배열로 생성해준다. 즉, map함수의 결과는 배열이다.
  
  

• arr.map(callback, [thisArg])

• arr.map(callback(currenValue, index, array), [thisArg])

  • callback : 새로운 배열의 요소를 생성하는 함수
  • currenValue : 현재 배열 내에서 처리하고 있는 요소
  • index : 현재 배열 내에서 처리하고 있는 요소의 index 값
  • array : 현재 배열 내에서 처리하고 있는 원본 배열
  • thisArg : callback 함수 내부에서 사용할 this레퍼런스
    
    
• ex ) map함수를 통해 각 배열의 요소에 제곱하여 새로운 배열 생성
  

✅ key 설정

• key를 사용하는 목적은 요소의 리스트를 만들때, React에서 컴포넌트를 렌더링 하였을때 어떤 아이템이 변경되었는지 빠르게 감지하기 위해 사용한다. (변경, 추가, 삭제 등)
• key는 요소의 고유한 값이어야 하므로 배열 요소의 id 또는 index로 사용해야한다.
  
  
• 위 코드와 같이 index 매개변수를 key 값으로 사용한다.
  

📌 결론

• 여러 컴포넌트를 불러올 수 있다.
• 코드가 간결해지고 짧아진다.
• map함수의 결과 값은 배열이다.
• map을 이용할때에는 key값을 넣어준다.