[react] Warning: Each child in a list should have a unique "key" prop. - 경고 수정

리엑트 작업하던 도중 경고 문구가 나타났다.

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

직역하자면,

위험: 리스트의 각 요소들은 "키" 속성을 가지고 있어야 합니다.

정도가 될 거 같다.

 

react에서 map을 사용하여 컴포넌트를 나타낼경우에는 각각 고유한 key를 가지고 있어야 한다.

<문제 코드>

{selectIdol.map((option: SelectVal, index: number) => (
  <MenuItem value={option.value}>{option.name}</MenuItem>
))}

 

<수정된 코드>

{selectIdol.map((option: SelectVal, index: number) => (
  <MenuItem key={"idolItem" + index} value={option.value}>
    {option.name}
  </MenuItem>
))}

 

 

위와 같이 반복해서 생성되는 component부분에 key를 설정해줬더니 해당 경고는 사라졌다.