map 메서드란?

배열의 메서드로, 배열의 각 요소에 대해 제공된 callback함수를 순서대로 호출한 뒤 새 배열을 반환합니다. 값이 할당 된 배열의 인덱스에 대해서만 호출됩니다. 따라서 새 배열을 활용할 경우에 사용하기 좋습니다.

MDN 참조
처음에는 이해가 안됐습니다... MDN의 Syntax에 대해서 몰라도 됩니다. 저도 매핑한다는 게 뭔지 사용하면서 조금씩 이해하고 있는 듯 합니다. 함께 Array.map()에 대해서 차근차근 정리해 봅시다 : )

let numbers = [1,2,3];
let doubles = numbers.map(el => el * 2); //[2, 4, 6]
let triples = numbers.map(function(num) {
  return num * 3;
}); //[3, 6, 9]

MDN의 Syntax적인 방법론이 triples에서 적용한 방식입니다.
익숙해지면 쉬운 것은 doubles의 array function 방식입니다.
el은 element의 약자로, 각 요소(배열의 인덱스)에 하나씩 접근하겠다는 말입니다.

let stringInArray = ['1', '2', '3'];
let fromStringToNumber1 = stringInArray.map(el => parseInt(el));
let fromStringToNumber2 = stringInArray.map(Number);

// parseInt는 인자를 두 개 받아올 수 있으므로 Number를 대신해서 쓸 수 없습니다. 따라서 다음과 같은 방법으로 쓸 수 있습니다. (el, 10)에서 10은 10진수를 나타냅니다.

function returnInt(el) {
  return parseInt(el, 10);
}
let fromStringToNumber3 = stringInArray.map(returnInt);
// [1, 2, 3] === fromStringToNumber1 === fromStringToNumber2 === fromStringToNumber3

const INFO = [
  {id: "1", content: "도움말"},
  {id: "2", content: "홍보 센터"},
  {id: "3", content: "API"},
  {id: "4", content: "채용정보"},
  {id: "5", content: "개인정보처리방침"},
  {id: "6", content: "약관"},
  {id: "7", content: "위치"},
  {id: "8", content: "인기 계정"},
]
let newINFO = INFO.map(el => {
  return (
    el.id + ":" + el.content
  )
})

newINFO의 값은 다음과 같습니다.
[
  '1:도움말',
  '2:홍보 센터',
  '3:API',
  '4:채용정보',
  '5:개인정보처리방침',
  '6:약관',
  '7:위치',
  '8:인기 계정'
]

react에서는 다음과 같이 활용해서 반복되는 코드를 줄일 수 있습니다!

render() {
  return (
    ...
    {INFO.map(el => {
       return (
         <li key={el.id}>
           <a href="">{el.content}</a>
         </li>
       )
    })}