Map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
map() 괄호 안에 함수를 넣어 사용할 수도 있기 때문에 아주 다양하게 응용이 가능합니다.
보통 json 데이터를 받아 이를 출력하고 싶을 때 map 메서드를 많이 이용합니다.

오늘은 map 메서드를 이용하여 동적 컴포넌트를 만드는 법을 알아보겠습니다.

const fruitlist = [
  {
   name : 'apple',
   image : 'https://image.shutterstock.com/image-photo/fresh-red-apple-isolated-on-260nw-254938384.jpg'
  },
  {
    name : 'orange',
    image : 'https://image.shutterstock.com/image-vector/abstract-orange-icon-vector-flat-260nw-1104205634.jpg'
  },
  {
    name : 'blueberry',
    image : 'https://image.shutterstock.com/image-photo/blueberries-isolated-260nw-722035450.jpg'
  },
  {
    name : 'watermelon',
    image : 'https://en.pimg.jp/050/595/319/1/50595319.jpg'
  }
];

배열 안에 객체가 담겨있는 데이터가 있습니다.

function Fruit({name, picture}){
  return <div>
    I like {name} <br/>
    <img src = {picture}/>
  </div>
}

그리고 컴포넌트를 만듭니다.

function App() {
  return (
    <div>
    리액트 입문하기
    {fruitlist.map(element => <Fruit name={element.name} picture={element.image} />)}
    </div>
  );
}
export default App;

여기서는 map 메서드 안에 새로운 함수를 만들었고 element라는 파라미터를 받는다고 써있습니다. 그리고 fruit 컴포넌트를 실행해 name에 element의 name이라는 props를 전달해준다고 써있네요!

하지만 이렇게 완성하면 콘솔창에서 경고메세지가 뜨게 됩니다.
Warning: Each child in a list should have a unique "key" prop.
리스트의 아이템들은 고유한 키값을 가지고 있어야 한다는 뜻입니다.

이럴 땐 다음과 같이 경고를 해결할 수 있습니다.

const fruitlist = [
  {
   id : 1,
   name : 'apple',
   image : 'https://image.shutterstock.com/image-photo/fresh-red-apple-isolated-on-260nw-254938384.jpg'
  },
  {
    id : 2,
    name : 'orange',
    image : 'https://image.shutterstock.com/image-vector/abstract-orange-icon-vector-flat-260nw-1104205634.jpg'
  },
  {
    id : 3,
    name : 'blueberry',
    image : 'https://image.shutterstock.com/image-photo/blueberries-isolated-260nw-722035450.jpg'
  },
  {
    id : 4,
    name : 'watermelon',
    image : 'https://en.pimg.jp/050/595/319/1/50595319.jpg'
  }
];

map함수 안도 수정해줍니다.

{fruitlist.map(element => <Fruit key={element.id} name={element.name} picture={element.image} />)}

이렇게 되면 경고가 사라지게 됩니다!

주의

map 메서드는 배열에서만 작동하는 메서드입니다!!!!
객체에 map 메서드를 사용하면 작동하지 않습니다 ㅎㅎㅎㅎㅎㅎㅎㅎ
저도 해보고 깨달음 ㅎㅎㅎㅎㅎㅎ ^^~~