#React_Key오류_Warning: Each child in a list should have a unique "key" prop.

React key 오류

Warning: Each child in a list should have a unique "key" prop.

key값 설정은 최상위 태그에서 이뤄져야 하는데 아래와 같이 잘못 설정하여 오류가 발생했다.

<>
  <tr key={ele.key}>
  </tr>
</>

 

key오류가 발생시 확인해야할 것들 with GPT

 

1. 리스트 요소의 key 중복

• 문제: key 속성이 중복되거나 고유하지 않아서 문제가 발생할 수 있습니다. 이 경우, key 속성이 설정된 모든 요소가 서로 다른 값을 가져야 합니다.

 

2. 리스트가 중첩된 경우 => import된 컴포넌트에 key값이 설정되어 있는지 확인

• 문제: 중첩된 리스트에서 key를 설정하지 않거나, key가 중복될 때 문제가 발생할 수 있습니다. 특히, 리스트를 생성하는 컴포넌트가 key를 제대로 설정하지 않은 경우가 많습니다.

 

3. 조건부 렌더링의 key 문제

• 문제: 조건부 렌더링을 사용할 때, key가 설정되지 않거나, 동일한 key 값이 여러 번 사용될 때 문제가 발생할 수 있습니다.

 

+ 4. key 속성이 최상위 요소에서 이뤄지고 있는지 확인