[JS] Object.assign

오늘 친구에게 까톡이 왔다.
Warning: Each child in a list should have a unique "key" prop 해당 경고를 해결하기 위한 도움 요청 이였다.

API에서 response된 데이터를 Array형태로 받았는데 antd component Table에서 rowKey에 담아줄 key값이 없다는 얘기였다. 서버에서 response된 데이터에 구분할 수 있는 유일한 값이 없다면 프론트에서 처리할 수 있는 간단한 방법을 제시하였다.

현재 데이터는 Array[Object] 형식이다. 아래와 같이 예를 들어 데이터가 있을 때,

const data = [
	{
    	name: '손흥민',
        job: '축구선수',
        age: '30'
    },
    {
    	name: '류현진',
        job: '야구선수',
        age: '33'
    },
    {
    	name: '정찬성',
        job: '격투기선수',
        age: '32'
    }
];

data안에 있는 3개의 key들은 언제든지 중복이 가능한 key이다. 물론 서버에서 key값을 response해주면 좋겠지만, 서버에 접근을 못한다는 가정을 두었다. 아래와 같이 antd 라이브러리에서 Table에 접근을 할 때, rowKey에 넣어줄 값이 없다는 말이였다.

<Table
  rowKey={ dataList => { return dataList.key } }
  dataSource={dataList}
  columns={columns} />

나의 해결방법은 아래와 같다 👇

import React from 'react';
import { Table } from 'antd';

function App() {

  let dataList = [];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Job',
      dataIndex: 'job',
      width: '30%',
      key: 'job',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      width: '12%',
    },
  ];
  
  const data = [
      {
          name: '손흥민',
          job: '축구선수',
          age: '30'
      },
      {
          name: '류현진',
          job: '야구선수',
          age: '33'
      },
      {
          name: '정찬성',
          job: '격투기선수',
          age: '32'
      }
  ];
  
  data.map((item, idx) => (
    dataList.push(Object.assign(item, {key: idx}))
  ));

  console.log(dataList);

  return (
    <>
      <Table
        rowKey={ (dataList) => { return dataList.key } }
        dataSource={dataList}
        columns={columns} />
    </>
  );
}

export default App;

Object.assign을 이용하여 복사 후 key를 추가해주는 형태이다.

더 좋은 방법과 좋은 코드가 있겠지만 자바스크립트 객체에 대해 다시 한번 생각할 수 있는 계기가 되었고, 유익한 시간이 되었다 😂