TIL #27 - React 리스트와 Key

리액트에서는 보통 동일한 형식의 데이터를 추가할 때 map() 함수를 이용해 리스트를 추가한다.

이 때 리스트에 key를 넣어주지 않을 경우 console에서 에러가 나오게 된다.

리액트에서 Key란?

리스트에서 Key는 어떤 항목을 변경하거나 추가, 삭제할 때 해당 항목을 구분해주는 역할을 한다. 보통 대부분은 데이터의 id를 key로 사용한다. 만약 id가 없다면 최후의 수단으로 index를 key로 사용할 수 있다.

그러나 데이터 항목의 순서가 바뀔 수 있는 경우 key에 index를 사용하는 것은 권장되지 않는다.

Index를 Key로 사용할 경우

• 성능 저하(중간에 순서가 바뀔 시 index값 재할당)
• 잘못된 데이터 노출

위와 같은 문제들 때문에 index 사용을 지양하고 데이터의 id를 1로 선언하여 데이터가 추가될 때마다 id값이 ++ 되도록 수정해주는 것이 바람직하다!

https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318