[React] key가 필요한 map()함수

map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

const a = [1, 2, 3, 4]
const b = a.map(x => x * 2)

console.log(b)

output:
 [2, 4, 6, 8]

위와 같이 array 내 요소에 함수를 적용한다!

array의 요소를 다 보여주는 것도 가능하다.
아래는 모든 요소를 목록으로 만드는 코드이다.

<div>
	<ul
   		{array.map((x) => (
        	<li>
       			x
            <li />
      	))}
   	ul />
</div>

잘 실행될 것 같지만 map에 key가 없어서 문제가 된다.
array내부에 key로 만들만한 요소가 존재하지 않는다면 따로 key값을 넣어줘야한다.

map의 두번째 argu는 index를 의미하기때문에 아래처럼 수정한다면 잘 작동하는 것을 확인할 수 있다!

<div>
	<ul
   		{array.map((x, index) => (
        	<li key=index>
       			x
            <li />
      	))}
   	ul />
</div>