[React] Eslint 경고: 이터레이터 요소에 Key 프로퍼티가 빠져 있다?

React에서 목록을 렌더링할 때, 각 항목에 고유한 식별자를 부여하는 것이 중요합니다. 이것이 바로 key 프로퍼티입니다. 이를 통해 React는 목록의 변경을 효율적으로 추적하고 업데이트할 수 있습니다.

하지만 Eslint에서 "이터레이터 요소에 Key 프로퍼티가 빠져 있다( Missing "key" prop for element in iteratoreslintreact/jsx-key )"는 경고를 보게 될 때가 있습니다. 이것은 목록 내의 각 자식 요소에 key 프로퍼티가 빠져 있다는 의미입니다.

Eslint 경고

브라우저는 목록 내의 각 자식에 고유한 key 프로퍼티가 있어야 한다고 한다.

문제 해결하기

이러한 경고를 해결하기 위해서는 각 항목에 key 프로퍼티를 추가해야 합니다. 이 key는 목록 내에서 각 항목을 고유하게 식별할 수 있는 값이어야 합니다.

예를 들어, 데이터에 이미 고유한 ID가 있다면, 해당 ID를 key로 사용할 수 있습니다. 다음은 예시 코드입니다.

{data.map((item) => (
  <li key={item.id}>
    {/* 항목 내용 */}
  </li>
))}

 

Key 프로퍼티를 추가하니 오류가 전부 사라짐

 

고유 식별자 사용하기

현실 세계에서는 대부분의 데이터가 이미 고유한 ID를 가지고 있습니다. 따라서 해당 ID를 활용하여 key로 사용하는 것이 일반적입니다.

{data.map((item) => (
  <li key={item.id}>
    {item.name} - {item.quantity}
  </li>
))}

 

Eslint 경고 없애기

이제 각 항목에 고유한 key 프로퍼티를 할당하면 Eslint의 경고가 사라집니다. React는 이제 목록을 효과적으로 관리하고 업데이트할 수 있게 됩니다.

이로써 React의 규칙을 따르면서 목록을 안전하게 렌더링할 수 있게 되었습니다. 향후 글에서는 이러한 key 프로퍼티를 활용하여 목록의 동적인 변경과 업데이트에 대해 더 다양한 작업을 다룰 예정입니다. 계속 진행해주세요 ! 🚀