Javascript/React

[React] Ant Design Table 사용 시 'key' prop

eulBlue 2024. 5. 2. 17:43

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^4.9.5"

Ant Design Table 을 가져다가 쓰려고 하는데 ..

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

에러가 발생했다.

페이지가 멈춰버린다거나 안되는 건 따로 없었지만 불편했고

나는 map 을 사용하지도 않았거니와 ..

테이블에 dataSource 에 데이터를 전달했기때문에

내가 따로 한게 없어서 왜나는지 이해할 수가 없었는데

<Table
    dataSource={userList}
    columns={columns}
/>

찾아보니까 rowKey 를 이용해서 해결 할 수 있다고 한다.

<Table
    dataSource={userList}
    columns={columns}
    rowKey={(row) => {
    	return row.user_id;
    }}
/>

Antd Table 에서 데이터소스를 map 돌리면서

키를 설정해주지 않으니까 그런가보다. 하고 생각하고있다.