map 함수

map()

-1. 배열의 모든 원소마다 특정 작업을 하는 함수를 적용하고, 그 함수가 반환한 결과를 모아서 배열로 반환합니다.

let lists = ['Hi', 'March', 'Blue', 'Love'];
lists.map((current)=>{console.log(current); return 0;})
//console 창에 원소 값이 출력되고, 출력한 개수만큼 0으로 채워진 배열을 반환합니다.

 

lists.map((current) => `${current}❤`)
//['Hi❤', 'Margin❤', 'Red❤', 'Blue❤']

 

2. React JS에서 map을 사용했을 때

- React 원소들은 유일해야 하는데 list에 들어가면서 유일함이 사라졌습니다.

- 따라서 각 리스트에 key값이 주어져야 합니다. (key값은 유효해야 하므로 중복되면 안됩니다.)

- 만약, key값을 주지 않았다면 아래와 같은 오류가 발생합니다.

Warning: Each child in a list should have a unique "key" prop.