map 함수

map()은 반복되는 컴포넌트를 렌더링하기 위해 사용한다.

• 배열의 자료 갯수만큼 반복한다.

사용법

const people = ["이희성", "김준경", "권세원"];
const result = people.map((person) => {
  console.log(person);
  return person;
});
console.log(result);

이런 식으로 사용하면 콘솔창에 이희성, 김준경, 권세원이 차례대로 출력 될 것이고, 마지막에 result 배열을 출력하면 ["이희성", "김준경", "권세원"]이 출력된다.

props로 응용

props로 일일히 하나 씩 다 넣기에는 한계가 있다.
이를 map()으로 해결할 수 있다.

<Person itme = { name = "이희성" age = "18" } />
  
function Person(props) {
  return (
    <div>
    	<h1>{props.item.name}</h1>
    	<h1>{props.item.age}</h1>
    </div>
  )
}

이런 식을 사용하면 Person이 아무리 많아도 코드를 줄일 수 있다.