[Mantine] client.js:1 Warning: Each child in a list should have a unique "key" prop

Mantine

요즘 자주쓰는 프레임워크 Mantine 을 사용하는 중이다. 

해당 프레임워크를 사용하다가 테이블 요소에 기능적인 부분들을 추가해 줄 패키지를 찾았는데 그게 바로 mantine datatable 이였다.

해당 소스는 mantine 기반으로 sort 및 toggle 형식의 여러가지 테이블 기능들을 제공해줘서 아주 유익하게 사용하고 있는 라이브러리 중 하나인데, 작업을 하던 중 이런 에러에 부딧히게 되었다.

 

Mantine DataTable

Mantine

 

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

위 에러는 key 값이 선언되지 않기때문에 발생하는 에러이다.

우리가 자주 사용하는 map 을 react 와 결합하면서 key 값을 선언해주지 않을 때 자주 나타나곤 한다.

 

해당 에러를 돌아보기 위해 매핑되어있는 요소들에 키가 제대로 입력되었는지 확인해주었는데, 정상 작동되어있었다.

뭐가 문제인지 한참 생각해보다가 table list 안에 배열 요소에 id 를 넣어주니 해결되었다.

 

한마디로 list 항목에 고유 key 가 선언되지 않아서 발생하는 오류였다.

id 항목을 추가해 list 에 고유 id 값을 부여해주면 해결된다.

 

mantine table 도 생각해보면 list 를 넣고 매핑해주는 역할을 하다보니, id 요소가 필요한 것이였다.