리액트 배열 내장 함수 : map()

map()

전달된 인자를 사용하여 각 배열의 요소를 돌면서 작업 처리 -> 처리된 결과를 새로운 배열에 담아 반환하는 함수

 

간단 사용법 예제

// [1]
const numbers = [1, 2, 3, 4, 5]; // 배열 객체 선언
const result = numbers.map((num) => num *2); // map() 함수가 배열의 각 요소 값에 2배 한 결과 return



// [2]
const menus = ["menu1", "menu2", "menu3", "menu4"] // 배열 객체 선언
const menuList = menus.map((menu) => (<li>{menu}</li>));  // map() 함수가 배열의 각 요소 값을 가지는 <li> return
return(
	<ul>
    	{menuList}
    </ul>
)



// [3] : 2번 예제 두 번째 라인을 key 값을 활용한 방법으로 변경한다면 다음과 같이 사용
// key 값 = map() 함수를 호출 시 인자로 넘기는 Callback 함수의 인자로 넘어오는 index 값
const menuList = menus.map((menu, index) => (<li key={index}>{menu}</li>)); // Callback 함수로 넘어오는 인자로 index 인자값을 추가