map 함수 사용시 주의할 anti-pattern(key)

map 함수

리액트에서 map 함수를 써주게되면 key를 줘야한다.

ary.map((item, index) =>
	return <div key={index}>{item}</>
);

나는 보통 이렇게 map 함수의 index를 key 값으로 줬다. 하지만 이는 anti-pattern 중 하나이다.

이렇게 index를 key 값으로 주면 안되는 경우는 ary 배열 중 한 값이 지워지거나, 순서가 달라질때, 중간에 값이 추가되는 경우가 대표적이다. 다만 배열의 값이 절대 바뀔 일이 없다면 key 값을 index로 줘도 상관없다. 

ary.map((item, index) =>
	return <div key={item.id}>{item}</>
);

따라서 이런 경우에는 위 코드처럼 고유 id를 만들어서 key 값으로 주는 것이 좋다.