매일메일 "리액트에서 index를 key값으로 사용하면 안되는 이유에 대해서 설명해주세요."

이수용·2025년 4월 21일

매일메일

목록 보기
21/31
post-thumbnail

리액트에서 index를 key값으로 사용하는 것이 권장되지 않는 이유는⁉️

배열의 요소들이 추가되거나 삭제될 때 배열의 순서가 바뀌는 경우 문제가 생길 수 있다.

리액트에서는 key값을 통해서 리스트에서 어떤 요소가 변경, 추가, 삭제되었는지를 확인할 수 있다. 하지만 index를 key값으로 사용하게 되면 배열의 순서가 변경될 때 리액트가 요소들을 잘못 인식할 수 있다.

그렇게 되면 성능 문제가 발생하거나 예기치 않은 버그가 생길 수 있다.
➡️ 배열의 순서나 요소 변경에 영향을 받지 않는 고유한 key값 필요!

key로 사용할 고유 값을 생성하는 방법 🤔

  1. 서버에서 제공하는 고유 ID
  2. ${item.title}_${item.username}와 같은 형태로 여러 필드를 결합
  3. 렌더링 이전 시점에 UUID 혹은 랜덤 값을 생성

UUID란?

UUID는 전 세계에서 유일한 값을 생성해주는 식별자

0개의 댓글