[React] Warning: Each child in a list should have a unique "key" prop. 에러 원인 및 해결방법

 

 

리스트를 map메서드로 보여주던 중 에러 발생

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

 

 

에러 발생 코드

  {chatList.map((value, index) => (
            <List>
              <MyListItem
                <ListItemText primary={value.name} secondary={value.lastChat} />
              </MyListItem>
            </List>
          ))}

 

원인

react에서 map메서드를 이용해 리스트를 순차적으로 나열할 때 배열의 각 값마다 독립적인 key값을 부여하지 않아서 나는 에러라고 한다. 

 

해결 방법

 

: 배열로 map 함수를 사용해 JSX 리스트를 구현할 때 key prop을 자식 컴포넌트마다 넣어준다.

 

1. key={index} 와 같이 key를 index로 설정해보기

-> index로 key값을 주는 것을 지양한다고 한다. 항목들이 삽입,삭제 될 경우 독립적인 key값이 아니게 된다..!

2. key={value}

-> 이 역시도 리스트들 중 같은 value값이 존재하면 key값은 독립적이지 않다. 

 

결론

순회하고 있는 각 배열 값의 id로 key값을 부여하였다. 이 id값은 데이터베이스에 저장되어 있는 id값이기 때문에 삽입, 삭제가 되어도 독립적인 값이다.

  {chatList.map((value, index) => (
            <List key={value.id}>
              <MyListItem
                <ListItemText primary={value.name} secondary={value.lastChat} />
              </MyListItem>
            </List>
          ))}

 

이렇게 하니 더 이상 에러가 나지 않는다!