[ React ] map() 사용 시 key는 반드시 넣어줘야 하는 권장사항.

map()을 활용해서 리스트를 만들다 보면 이런 에러가 나타난다.

 

 

리스트의 각 아이템에는 고유한 key prop이 필요하다는 에러.

 

Key는 왜 필요한걸까?

Key가 필수도 아니고 안 써도 작동하지만 필수처럼 쓰이는 권장사항이다.

 

 

Key는 React가 동적 리스트나 반복 요소를 렌더링 할 때

어떤 항목을 변경하거나 추가, 삭제하는 것에 대한 식별을 돕는다.

식별자를 제공하면 리액트가 요소 간의 변경을 더 효율적으로 추적할 수 있고

업데이트도 더 빠르게 처리할 수 있다. 

아이템의 재사용 관리도 더 쉬워지며 예상치 못한 버그나 렌더링 이슈도 방지할 수 있다.

 

엘리먼트의 안정적인 고유성을 부여하기 위해서는

배열 내부의 엘리먼트에 Key를 지정해야 한다.

 

데이터의 ID를 key로 지정하는 것이 고유하게 식별할 수 있기에

가장 좋은 방법일 수 있다.

 

Key는 배열 안에서 형제 사이에 고유해야 하고

전체 범위에서 두 개의 다른 배열에서는 동일한 key를 사용할 수 있다.

 

출처:

https://ko.legacy.reactjs.org/docs/lists-and-keys.html

리스트와 Key – React

 

 

Key를 index로 지정할 수도 있지만

성능저하나 컴포넌트 state관련된 문제가 발생할 수 있다.

리액트에서 인덱스를 key를 사용한다면 리스트 아이템이 추가나 삭제될 때마다

인덱스가 변경되는 것을 생각해봐야 한다.

이 경우에 리액트는 매번 컴포넌트를 업데이트를 해야 해서 성능에 부담을 줄 수 있다.

이는 재사용에서도 동일한 인덱스를 가진 아이템이 위치가 변경될 때 문제가 발생될 수 있다.

접근성이나 유지보수 측면에서도 고유한 식별자나 속성을 key로 사용하는 것이

리액트의 업데이트를 더 효율적으로 처리할 수 있고 버그를 방지할 수 있다.

 

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

Index as a key is an anti-pattern