[REACT] Map()

java에서의 map과 javascript에서의 map은 키와 값을 가진다는 점에서는 비슷하다고 말할 수 있다.

하지만 java-map은 그 자체가 인터페이스이고, javascript-map()은 그 자체가 함수이다.

 

JS - map

 

javascript에서의 map은 반복문과 같은 역할을 한다고 말할 수 있다.

 

// for loop를 활용한 배열값 확인
const numbers = [ 1, 2, 3 ];
for (let i = 0; i < numbers.length; i++) {
	console.log(numbers[i]); // 1, 2, 3
}

// map을 활용한 배열값 확인
const numbers = [ 1, 2, 3 ];
let numberData = numbers.map((num)=>{
	return num;
})
console.log(numberData) // 1, 2, 3

 

위와 같이 반복문의 역할을 하는 map은

배열.map((요소, (인덱스), (배열) => { return 요소 }) 와 같이 사용할 수 있다.

 

그런데, 위에서 map은 키와 값을 가진다고 했는데 키값은 어떻게 확인할 수 있을까?

 

export default function App(){

	const fruits = ["apple", "banana", "cacao"];

	const fruitData = fruits.map((fruit, key) => {
    	return (
      		<div>
      			<span>{key}. {fruit}</span>
      		</div>
    	)
	});
    
	return (
		<div>
		{fruitData}
		</div>
	)
    
}

 

앞서 설명했듯이, map함수에 두 번째로 오는 인자가 인덱스 값이 된다.

 

 

그래서 {key} 로 확인해보면 0, 1, 2가 되는 것을 확인할 수 있다.